本文介绍: 1.echarts图表,涉及dom操作 ,图表数值二次变化的时候,data更新了,但是dom没有更新。不需要用this.$nextTick来更新dom,因为echarts提供了一个方法。2.setOptions() 接收一个方法为参数。3.使用echarts步骤。
1.echarts图表,涉及dom操作 ,图表数值二次变化的时候,data更新了,但是dom没有更新。
不需要用this.$nextTick来更新dom,因为echarts提供了一个方法
//1.在html里面
<div id="myChart" :style="{ width: '290px', height: '450px' }"></div>
// 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
}
]
}
},
.
原文地址:https://blog.csdn.net/weixin_43204464/article/details/131409719
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_38756.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。