多语言展示
当前在线:193今日阅读:91今日分享:37

echarts柱线混合图制作

echarts柱线混合图制作,在一线中用的很多,但愿有帮助
工具/原料

webstorm工具

方法/步骤
1

(1).把series中的数据一个改为line一个改为bar series : [           {               symbol:'image://tu.jpg',               symbolSize:'18',               name:'男性',               type:'bar',               lineStyle: {                   normal: {                       color: '#ffffff',                       width:1,                       type:'dotted'                   },               },              /* stack: '总量',               areaStyle: {normal: {}},*/               data:datainfo.maledata           },           {               name:'女性',               type:'line',           label:{               normal: {                   show:true,                   color:'red',

2

(2).在y轴处添加如下:yAxis : [           {               type : 'value'           },           {               type : 'value',               axisLine: {                   lineStyle:{                       color:'green',                       width:'2'                   }               },                         axisLabel:{                   show:true,                   textStyle:{                       color:'#f00'                   },                   formatter:'{value}%'               }           }       ],

3

(3).指定数据对应哪个轴线{               name:'女性',               type:'line',           label:{               normal: {                   show:true,                   color:'red',               },               emphasis: {                   show:true,                   color:'green',               },               yAxisIndex:1,           },

4

(4).更改femaledata数据 'femaledata':[1264, 1279, 1293, 1306, 1323, 1327, 1331, 1346, 1358, 1368, 1383, 1405, 1413, 1423, 1441, 1452, 1463, 1474, 1481, 1496, 1509, 1527, 1539, 1547, 1562, 1592, 1611, 1632, 1651]

5

(5).最终预览如图:

6

(6).如果按上面做,一定没问题的,祝你成功

注意事项

yAxisIndex:1

推荐信息