echarts图表修改值 立即变化

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 } ] } },

.

你可能感兴趣的:(echarts,javascript,ecmascript)