1.echarts图表，涉及dom操作 ，图表数值二次变化的时候，data更新了，但是dom没有更新。
不需要用this.$nextTick来更新dom，因为echarts提供了一个方法
2.setOptions() 接收一个方法为参数
3.使用echarts步骤
//1.在html里面
// 2.引入echarts
import * as echarts from "echarts";
//用js获取dom
let myChart = document.getElementById("myChart"); //获取dom
myChart = echarts.init(myChart); //echarts实例化dom
myChart.setOption(this.getMyChartOption()); //给图表赋值
//用setOption方法给他赋值。接收一个方法为参数
getMyChartOption(){
return {
title: {
text: "各学院助学金名额分配情况",
left: "center",
textStyle: {
fontSize: 14
}
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {
top: "6%",
left: "right"
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
splitLine: {
show: false
}
},
yAxis: {
type: "category",
data: this.echartsLabelMe,
triggerEvent: true,
axisLabel: {
formatter: function (value) {
var val = "";
if (value.length > 5) {
val = value.substr(0, 5) + "...";
return val;
} else {
return value;
}
}
}
},
series: [
{
name: "分配比例（%）",
type: "bar",
barWidth: 20,
itemStyle: {
color: {
type: "linear",
x: 0, //右
y: 0, //下
x2: 1, //左
y2: 0, //上
colorStops: [
{
offset: 0,
color: "#0181fe" // 0% 处的颜色
},
{
offset: 0.7,
color: "#00abff" // 70% 处的颜色
},
{
offset: 1,
color: "#00b9fe" // 100% 处的颜色
}
]
}
},
label: {
show: true,
position: "inside",
color: "#ffffff" //字体颜色
},
// data: [0.2, 0.3, 0.5, 0.8, 0.7, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6]
data: this.meData
}
]
}
},
.
相关文章
您阅读本篇文章共花了：
发表评论