vue中Echarts的使用-自选效果
由于项目要求使用数据图,于是我选择了我们的Echarts用来实现效果
一:全局安装Echarts
npm install echarts --save(这个安装的是最新的版本有时候回报init未定义)这个时候可以使用低版本npm install --save echarts@4.1.0我是用的4.1.0
二:在所需echarts的页面中引入Echarts
import echarts from "echarts";
三:按照这个步骤以此移入自己选择的Echarts配置
export default { name: "", data() { return {}; }, mounted() { this.drawLine(); // 调用绘图函数 }, methods: { drawLine() { // 初始化 let myCharts = echarts.init(this.$refs.myCharts); // let myChart = echarts.init(document.getElementById('myChart')); // 写配置 let option = { xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], }, yAxis: { type: "value", }, series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: "line", smooth: true, }, ], }; // 使用配置生成报表 myCharts.setOption(option); }, }, };
有时候会出现可以尝试一下使用
一:
mounted() { this.$nextTick(() => { this.drawLine(); }); }
二:
mounted() { setTimeout(() => { this.drawLine(); // 调用绘图函数 }, 1000); },