echarts 关系图 参数_Echarts简单柱状图的参数配置

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