vue-cli2中使用Echarts
一、安装Echarts插件
在已经建好的脚手架的终端中输入
错误输入:npm install echarts --save
正确输入:npm install echarts@4.9.0 --save
下面演示错误输入带来的问题,以及解决办法(不想看可以直接跳到第二步):
ps:解决上面错误 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
#第一步卸载之前安装的echars版本
npm uninstall echarts --Save
#第二步输入指定版本号安装
npm install echarts@4.9.0 --save
二、在main.js中引入插件
在main.js中加入下面代码:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
三、在组件静态获取数据并渲染echarts图表
案例如下:
<template>
<div>
<div ref="chart" style="width:100%;height:376px"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
mounted() {
this.getEchartData();
},
methods: {
getEchartData() {
const chart = this.$refs.chart;
if (chart) {
const myChart = this.$echarts.init(chart);
const option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
},
],
};
myChart.setOption(option);
//当窗口发送变化的时候,改变图表的大小
window.addEventListener("resize", function () {
myChart.resize();
});
}
//防止多次触发窗口发送变化
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
myChart.resize();
});
});
},
},
};
</script>
四、echarts图表自适应容器大小
案例如下:
代码分析:重点将在上面用mounted()调用echarts方法改成了watch监听调用,因为created()中获取数据是异步加载的,我们此时要等数据加载完成,才可以绘图。用watch去监听,当数据改变完成后绘图。
<template>
<div>
<div ref="chart" style="width:100%;height:376px"></div>
</div>
</template>
<script>
import { getEchartsData } from "../network/charts";
export default {
name: "HelloWorld",
data() {
return {
option: null,
};
},
created() {
//获取图表数据
this.getEchartsData();
},
watch: {
//构建图表
option() {
this.$nextTick(() => {
this.getEchartData();
});
},
},
methods: {
/**
* 发送网络请求
*/
getEchartsData() {
getEchartsData()
.then((res) => {
const yValue = res.data.yValue;
this.option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: Array.from(yValue),
type: "bar",
},
],
};
})
.catch((err) => {
console.log(err);
});
},
//构建图表
getEchartData() {
const chart = this.$refs.chart;
if (chart) {
const myChart = this.$echarts.init(chart, "dark");
myChart.setOption(this.option);
//当窗口发送变化的时候,改变图表的大小
window.addEventListener("resize", function () {
myChart.resize();
});
}
//防止多次触发窗口发送变化
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
myChart.resize();
});
});
},
},
};
</script>