柱状图的一些配置说明(后期用到会更新)
myChart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
legend: {
data: ['数据1',‘数据2’], //每条数据有多个柱图用此,注意series里name要与 此同步
x: 200, // 'center' | 'left' | {number}, //提示数据的位置方向
y: 20, // 'center' | 'bottom' | {number}
},
title: {
text: "", //标题
},
grid: {
borderWidth: 0,
left: 40, //调位置
right: 30,
top: 65
},
xAxis: [
{
data: this.cityNameList,
axisTick: {
show: false, //去除x轴线上的小线段(边框线)
},
axisLine: {
show: false, //去除x轴线(边框线)
lineStyle: {
color: "#3A4E64", //x轴文字颜色
},
},
axisLabel: { interval: 0, rotate: 40 } //x轴线文字方向(文字太长需要)
},
],
yAxis: {
type: "value",
axisTick: {
show: false,
},
axisLine: {
show: true,//边框线显示不显示
lineStyle: {
color: "#E0E5EC",//边框线的颜色
},
},
splitLine: {
lineStyle: {
color: '#E0E5EC'//所有横线的颜色
}
},
axisLabel: { //字体颜色
show: true,
textStyle: {
color: "#666", //y轴文字颜色
},
},
},
series: [
{
type: "bar",
barWidth: 15, //柱图的粗细
name: '数据1'
showBackground: false,
itemStyle: { //柱图颜色渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //0 0 0 1 控制方向
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
]),
},
data: this.countList,
},
],
});