var myChart = echarts.init(document.getElementById('box')); var legend=['营销', '广告','视频','引擎','信息流','短视频']; var color=["#ffd012","#ff122e","#1287ff","#4bc336","#ff8212","#bbbbbb"]; var dataX=['推广','渠道','媒体']; var dataSource=[ { data:[80, 75, 70] }, { data:[50, 34, 26] }, { data:[50, 34, 26] }, { data:[50, 34, 26] }, { data:[50, 34, 26] }, { data:[50, 34, 26] } ] var series=[]; dataSource.forEach((v,i)=>{ series.push( { name: legend[i], type: 'bar', barWidth: '26', itemStyle: { normal: { color:color[i], barBorderRadius: [3, 3, 0, 0] }, }, label: { normal: { show: true, position: "top", color: "#666", formatter: function(params) { params.value; } } }, data: v.data } ) }) var option = { tooltip: { trigger: "axis", axisPointer: { type: 'shadow' } }, grid: { left: '4%', right: '4%', bottom: '5%', top:'16%', containLabel: true }, legend: { data:legend , right: 0, top:0, textStyle: { color: "#666", fontSize:12 }, itemWidth: 16, itemHeight: 12 }, xAxis: { type: 'category', data: dataX, axisLine: { lineStyle: { color: '#dddddd' } }, axisLabel: { textStyle: { color:"#666666", fontSize:12, } }, axisTick:{ show:false } }, yAxis:[ { //y轴左边的参数配置 type: 'value', name: "数量", nameTextStyle: { color: "#666", align: "right" }, axisLine: { show: true, lineStyle: { color: '#dddddd' } }, splitNumber:10, splitLine: { show: true, lineStyle: { color: '#dfdfdf' } }, axisLabel: { textStyle:{ color:"#666", fontSize:12 } }, axisTick:{ show:false } },{ //y轴右边的参数配置 axisLine: { show: true, lineStyle: { color: '#dddddd' } } }], series:series }; myChart.setOption(option);
原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/1724