html
<div id="main_left" style="width: 635px;height:400px;"></div>main.js
import echarts from "echarts";
Vue.prototype.$echarts = echarts; // echartsjs
<script>
export default {
data() {
return {};
},
methods: {
//
landClassAcreagea() {
console.log("echarts",this.$echarts);
/* -> */
var myChart = this.$echarts.init(document.getElementById("main_left"));
//
var option = {
title: {
text: "",
textStyle: {
fontWeight: "normal",
color: "-sharpfff", //
fontSize: 14
}
},
tooltip: {
//
show: true
},
legend: {
// data: [""],
textStyle: {
fontSize: 12
}
},
//
xAxis: {
data: ["", "", "", "", "", "", ""],
axisLabel: {
show: true,
textStyle: {
color: "-sharpfff"
}
},
axisLine: {
lineStyle: {
color: "-sharp094060"
}
}
},
//
yAxis: {
//
axisLine: {
lineStyle: {
color: "-sharp094060"
}
},
axisLabel: {
show: true,
textStyle: {
color: "-sharpfff"
}
},
splitLine: {
lineStyle: {
color: ["-sharp07405c"]
}
}
},
//
itemStyle: {
//:
normal: {
//colorListcolorList
color: function(params) {
var colorList = ["-sharp0166ff"];
return colorList[params.dataIndex % colorList.length];
}
},
//:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
series: [
{
// name: "",
type: "bar",
barWidth: 13, //
data: [5000, 8000, 3000, 4500, 3200, 2800, 3800]
}
]
};
//
myChart.setOption(option);
}
},
mounted() {
this.landClassAcreagea();
}
};
</script>the effect displayed by the browser has width and height, but every time canvas is not displayed
landClassAcreagea()echarts,
