折线和柱状(自定义图案)结合

symbol : 自定义图案三种方式 : ECharts 提供的标记类型 URL 为图片链接可以通过 'path://' 将图标设置为任意的矢量路径

这个图标是使用的path(矢量图)

效果图:

代码块:

option = {backgroundColor: '#0f375f',tooltip: {trigger: 'axis',},xAxis: {type: 'category',data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],axisLine: {show: true, //隐藏X轴轴线lineStyle: {color: '#01FCE3',},},axisTick: {show: true, //隐藏X轴刻度},axisLabel: {show: true,interval:0, // 解决字体超过数量不显示问题rotate:0,textStyle: {color: '#ebf8ac', //X轴文字颜色},},},yAxis: [{type: 'value',name: '亿元',nameTextStyle: {color: '#ebf8ac',},splitLine: {//虚线lineStyle: {type: 'dashed',color: 'rgba(135,140,147,0.8)',},},axisTick: {show: true,},axisLine: {show: true,lineStyle: {color: '#FFFFFF',},},axisLabel: {show: true,textStyle: {color: '#ebf8ac',},},},{type: 'value',name: '同比',nameTextStyle: {color: '#ebf8ac',},position: 'right',splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: true,formatter: '{value} %', //右侧Y轴文字显示textStyle: {color: '#ebf8ac',},},},{type: 'value',gridIndex: 0,min: 50,max: 100,splitNumber: 8,splitLine: {show: false,},axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},},],series: [{name: '销售水量',type: 'line',yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用symbol: 'none',itemStyle: {//折线拐点标志的样式color: '#058cff',},lineStyle: {color: '#058cff',},areaStyle: {color: 'rgba(5,140,255, 0.2)',},data: [5, 6, 4, 7, 10, 8, 15, 12],},{name: '主营业务',type: 'pictorialBar',symbol: 'path://M29.902,23.275c1.86,0,3.368-1.506,3.368-3.365c0-1.859-1.508-3.365-3.368-3.365 c-1.857,0-3.365,1.506-3.365,3.365C26.537,21.769,28.045,23.275,29.902,23.275z M36.867,30.74c-1.666-0.467-3.799-1.6-4.732-4.199 c-0.932-2.6-3.131-2.998-4.797-2.998s-7.098,3.894-7.098,3.894c-1.133,1.001-2.1,6.502-0.967,6.769 c1.133,0.269,1.266-1.533,1.934-3.599c0.666-2.065,3.797-3.466,3.797-3.466s0.201,2.467-0.398,3.866 c-0.599,1.399-1.133,2.866-1.467,6.198s-1.6,3.665-3.799,6.266c-2.199,2.598-0.6,3.797,0.398,3.664 c1.002-0.133,5.865-5.598,6.398-6.998c0.533-1.397,0.668-3.732,0.668-3.732s0,0,2.199,1.867c2.199,1.865,2.332,4.6,2.998,7.73 s2.332,0.934,2.332-0.467c0-1.401,0.269-5.465-1-7.064c-1.265-1.6-3.73-3.465-3.73-5.265s1.199-3.732,1.199-3.732 c0.332,1.667,3.335,3.065,5.599,3.399C38.668,33.206,38.533,31.207,36.867,30.74z',barWidth: 30,itemStyle: {//颜色normal: {color: function (params) {//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];return colorList[params.dataIndex];},},},data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],},],
};

折线和柱状(自定义图案)结合相关推荐

用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&q ...
Axure原型创建折线、柱状等图形，引用echarts
1.在echarts网站选择对应的统计图形: 网址:Examples - Apache ECharts 2.对代码进行编辑,使其适配自己的业务. 3.在Axure中创建一个基本元件矩形.命名为:tes ...
iOS 使用Charts框架折线,柱状,K线,饼状,雷达全攻略
我是前言: 大约几个月前我写了一篇文章, 文中简单地介绍了Charts两种图表的样式的使用, 不过有种意犹未尽的感觉, 利用周末的空闲时间再次看了看, 有了新的收获, 今天发出来,分享给大家, 来稍加 ...
echarts:饼、柱状、折线图的配置说明
文章目录前言柱状图和折线图主要配置项: 饼图的基本配置项 series 数据项有什么功能组件? 渐进式案例: vue中画一个基本的饼图为它添加提示组件tooltip dataZom,用柱状图演 ...
VML 画统计柱状、饼图、折线
   <!-- 高度定义有待改进 c ...
柱状折线图2-双柱状重合堆积折线-重写图例点击事件
本例子: 使用了formatter方法重写了提示层的展示数据使用了双x轴实现重合使用了stack实现堆积使用了legendselectchanged和dispatchAction重写了图例点击事 ...
matplotlib画图-折线/散点/柱状/条形图
1 折线图 [绘图]: plt.plot(x,y):x,y的位置绘制两个折线,并设置不同样式: plt.plot([位置1], 值1,'样式1', [位置2], 值2,'样式2') 或者,重复: pl ...
【Axure高保真原型】柱状-折线组合图表原型模板
今天和大家分享柱状-折线组合统计图表的原型模板,该模板用Axure原生元件制作而成,所以样式交互都可以任意修改.该模板用中继器制作,所以使用方便,在中继器表格中填写数据以及坐标最大值,既可以自动生成柱 ...
vue实现【echarts中 “7种” Bar柱状图图例】实现人格画像组件的封装，并在柱状条显示label自定义文字
图例一: 图例二: 图例三: 图例四: 图例五: 图例六: 图例七: 一.安装echarts npm install echarts --save 二.在需要的页面引入 import * as ech ...

折线和柱状(自定义图案)结合

折线和柱状(自定义图案)结合相关推荐

最新文章

热门文章