1==》首先准备一个容器
<div id="echartContainer" style="width:400px; height:400px"></div> <!--创建一个echarts的容器-->
2==>在当前的页面中使用axios
引入放在本地在static文件中的静态文件op.js
引入echarts
import axios from 'axios';
将数据格式放在js文件中 等会将他暴露出去
import {option} from '../../../static/op.js'
引入echarts模块
var echarts = require('echarts');
op.js文件如下,它黎曼是配置好了的参数
export const option = {
title: { text: '简单饼状图' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
name: '产品'
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [],
itemStyle: {
normal: {
color: 'hotpink'
}
}
}]
}
3==》在调用methods中写一个方法,在mounted中去调用
mounted() {
// 调用这个函数 在节点创建完成之后
this.drawBarChart();
},
4==>在methods中写一个方法
methods:{
drawBarChart() {
// 基于准备好的dom,初始化echarts实例
var myChart = this.echarts.init(document.getElementById('echartContainer'));
// 绘制基本图表
myChart.setOption(option); //option是一个详细的配置参数
//没有加载出来显示加载动画
myChart.showLoading();
//获取数据
axios.get('../../static/b.json').then(res => {
setTimeout(()=>{ //未来让加载动画效果明显,这里加入了setTimeout,实现2s延时
myChart.hideLoading(); //没有加载出来隐藏加载动画
myChart.setOption({ //动画的配置
series: [{
data: res.data.product //这里数据是一个数组的形似
}]
})
}, 2000 )
})
},
b.json的参数也是如下的
{
"product" : [5, 20, 36, 10, 10, 20]
}
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识