在vue项目中, echarts柱状图背景颜色在哪里改?
不用vue框架的时候, 颜色是可以正常修改, 这是之前修改这里可以改变背景颜色, 用了vue之后就不行了
代码
/* 统计柱状图 */
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var statistics = {
title: {
text: "面积",
textStyle: {
fontWeight: "normal",
color: "#fff", // 标题颜色
fontSize: 14
},
left: "center"
},
tooltip: {
// 鼠标移动柱状图是提示文字
show: true
},
legend: {
// data: ['面积'],
textStyle: {
fontSize: 12
}
},
// 横坐标
xAxis: {
data: ["灌木", "森林", "森林", "树木", "小树", "大树", "红树"],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
axisLine: {
lineStyle: {
color: "#094060"
}
}
},
// 纵坐标
yAxis: {
// 设置坐标轴字体颜色
axisLine: {
lineStyle: {
color: "#094060"
}
},
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
splitLine: {
lineStyle: {
color: ["#07405c"]
}
}
},
//配置样式
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function(params) {
var colorList = ["#069f71"];
return colorList[params.dataIndex % colorList.length];
}
},
//鼠标悬停时：
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
series: [
{
type: "bar",
barWidth: 50, // 设置柱的宽度
data: [38, 23, 35, 12, 26, 8, 36]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(statistics);
慕神84474891回答
-
杨魅力
echarts 配置项里 series的 itemStyle
随时随地看视频慕课网APP
相关分类
JavaScript