1==》首先准备一个容器
<div id="echartContainer" style="width:400px; height:400px"></div> <!--创建一个echarts的容器-->
2==>在当前的页面中使用axios 和 引入放在本地在static文件中的静态文件op.js 引入echarts
import axios from ‘axios‘; import {option} from ‘../../../static/op.js‘ //将数据格式现在js文件中 等会将他暴露出去
// 通过 npm 上安装的 ECharts 和 require(‘echarts‘) 得到 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(); },
3==>在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] }