Apache ECharts
echarts官网
1.先在项目中下载 echarts
cnpm i echarts --save
2.在 main.js 中 引入 并使用
//引用 echarts
import * as echarts from 'echarts';
//使用echarts
Vue.prototype.$echarts = echarts;
3.在视图层留下放置可视化图表的盒子,起id名
(注意,这个盒子必须有高度)
<div class="charts_box" id="myChart"></div>
4.在方法中心定义一个方法,并在生命周期函数中调用
methods: {
drawLine(){
}
},
//在生命周期函数中调用
mounted() {
this.drawLine();
}
5.在定义的方法中抓取放置可视化图表的容器
drawLine(){
// 抓取放置可视化图表的容器
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'));
}
6.抓取容器后,配置指定图表的配置项和数据
drawLine(){
// 抓取放置可视化图表的容器
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据(视图内容)
let option = {
// 这里面的内容就是echarts官网提供的图表的数据和配置项
}
}
7.使用刚指定的配置项和数据显示出图表
drawLine(){
let myChart = this.$echarts.init(document.getElementById('myChart'));
let myChart1 = this.$echarts.init(document.getElementById('myChart1'));
let option = {
}
let option1 = {
}
// 使用刚指定好的配置项和数据显示图表
myChart.setOption(option);
myChart1.setOption(option1);
}