vue中如何使用echarts,使用axios获取数据
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'
op.js如下,它黎曼是配置好了的参数
export const option = { title: { text: '简单饼状图' },tooltip: {},xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],name: '产品' },yAxis: {},series: [{ name: '销量',type: 'bar' } } }] }
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,20] }