重要
本教程适合5.0以下的echarts的版本,查看package.json下自己的echarts版本
卸载之前版本
npm uninstall echarts
安装低版本
npm install echarts@4.8.0 --save
废话不多说直接上代码,由于前后端交互,所以使用axios发送请求
如饼图:
一,安装vue中安装echarts,axios和vue-axios
npm install echarts -S
npm install axios
npm install --save vue-axios
二,全局引入echarts和axios
import echarts from echarts
import echarts from echarts
import axios from axios
import VueAxios from vue-axios
Vue.prototype.$echarts = echarts
Vue.prototype.$axios = axios;
Vue.use(VueAxios, axios);
三,后端获取数据格式为json,其中必须带value和name属性:
如图
四,前端处理数据
创建容器
<div>
<h3>echart前后端交互使用</h3>
<div id="main" :style="{width: 350px, height: 350px}"></div>
</div>
导入
import echarts from echarts
require(echarts/theme/macarons) // echarts theme
发送请求方法
全部代码:demo1.vue
这里提醒一下,后端返回数据为json格式,且必须有value和name的属性
希望对你有帮助.参考博客文章:
