在vue中如何使用echarts

~
本篇文章主要介绍了在vue中通过axios异步使用echarts的方法，现在分享给大家，也给大家做个参考。
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数据。
一、 实现异步加载数据
(一)引入vue-resource
通过npm下载axios
//命令行中输入
npm install axios --save在main.js中引入axios并注册
// main.js
import http from './http'
Vue.prototype.$http = http //挂载到原型上(二)设置data.json
将该柱状图的没有数据的option抽取到data.json中, 代码如下:

{
"title": { "text": "简单饼状图" },
"tooltip": {},
"xAxis": {
"data": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
"name": "产品"
},
"yAxis": {},
"series": [{
"name": "销量",
"type": "bar",
"data": [5, 20, 36, 10, 10, 20],
"itemStyle": {
"normal": {
"color": "hotpink"
}
}
}]
}(三)在async-bar-chart.vue中请求数据
从aysnc-barChart-option.js中引入option
在methods中添加drawBarChart()方法
在mounted()钩子函数中调用drawBarChart()
代码如下:
<template>
<p id="myChart" :style="{width: '800px', height: '400px'}"></p>
</template>
<script>
export default {
name: 'echarts',
data() {
return {
msg: 'Welcome to Your Vue.js App',
goods: {}
}
},
mounted() {
this.drawLine();
},
created() {
this.$http.get('./static/dat.json').then(res => {
const data = res.data;
this.goods = data
console.log(this.goods);
console.log(Array.from(this.goods.xAxis.data));
})
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {}, //{text: '异步数据加载示例'},
tooltip: {},
xAxis: {
data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [] //[5, 20, 36, 10, 10, 20]
}]
});
this.$http.get("./static/dat.json") .then((res) => {
const data = res.data;
const list = data.series.map(good=>{
let list = good.data;
return [...list]
})
console.log(list);
console.log(Array.from(...list));
myChart.setOption({
title: data.title,
xAxis: [{
data: data.xAxis.data
}],
series: [{
name: '销量',
type: 'bar',
data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
}]
});
})
}
}
}
</script>
二. 添加加载动画
如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
在drawLine()方法中添加showLoading()和hideLoading(), 代码如下:

methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {}, //{text: '异步数据加载示例'},
tooltip: {},
xAxis: {
data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [] //[5, 20, 36, 10, 10, 20]
}]
});
//显示加载动画
myChart.showLoading();
this.$http.get("./static/dat.json").then((res) => {
setTimeout(() => { //未来让加载动画效果明显,这里加入了setTimeout,实现3s延时
const data = res.data;
const list = data.series.map(good => {
let list = good.data;
return [...list]
})
console.log(list);
console.log(Array.from(...list));
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({
title: data.title,
xAxis: [{
data: data.xAxis.data
}],
series: [{
name: '销量',
type: 'bar',
data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
}]
});
}, 3000)
})
}
}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
React-native桥接Android如何实现，具体步骤又是什么？
在vue中如何开发自定义指令directive
移动web开发中有关touch事件（详细教程）
详细解读layui父子窗口如何传递参数
在微信小程序中如何实现image组件图片自适应显示

---

田东县19687758767： vue 中怎么引入echarts的地图 - ？
尹杰龙胆： option在你手里,实例也有getOption方法

田东县19687758767： vue怎样定义echarts的点击事件 - ？
尹杰龙胆： 不是很理解你的需求,可以明确的是echarts可以添加点击事件:chart.on('click',function(params){//dosomething});FYI.

田东县19687758767： vue - echats - ？
尹杰龙胆： 没用过vue-echarts.如果是echarts的话有专门的销毁实例的方法(dispose()),可以再路由跳转前(router.beforeeach内),尝试销毁echarts对象.ECMAScript有无用存储单元收集程序,意味着不必专门销毁对象来释放内存.当再没有对对...

田东县19687758767： Vue create方法调用echart的setOption,为什么echarts不会显示 - ？
尹杰龙胆： 需要在mounted中,因为需要dom渲染完毕才可以找到元素,所以还需要加上$nextTick(),在这个里面调用函数

田东县19687758767： 如何使用和设置echarts主题 - ？
尹杰龙胆： 1、下载好开发包后就可以开始了,第一步引入开发包,和需要的主题文件(可定义自己的主体文件),并定义好页面布局.2.0以后上的版本,需要把开发包放到body下,否则ie低版本会出现属性未找到的错误,导致图标初始化失败.2、第二...

田东县19687758767： 如何使用echarts绘制树形图表 - ？
尹杰龙胆： 在setoption之后添加这段代码:window.onresize = myChart.resize;

田东县19687758767： vue main.js 加入方法怎么条用法 - ？
尹杰龙胆： let echarts = require('echarts/lib/echarts'); // 引入折现图 require('echarts/lib/chart/line'); // 引入提示框和标题组件 require('echarts/lib/component/tooltip'); require('echarts/lib/component/title')

田东县19687758767： github echarts 怎么使用 - ？
尹杰龙胆： echarts的使用步骤如下:1. 去官网下载echarts的压缩包.2. 引入到项目中.3. 页面引入echarts.js.举例:在页面生成一个条形图.首先,使用require命令导入echarts,require.config({ paths : { echarts : 'resources/js/lib/echarts' } }); 编写bar的代...

田东县19687758767： echarts主题在线构建工具怎么使用 - ？
尹杰龙胆： 然后,就是去引用啦.在自己的js中,myChart = echarts.init(document.getElementById('main'),'macarons');--------------------------------------------------- 分割线 -------------------------------------------------------------------------- P.S.注意init的第二个参数不是主题js的文件名!是文件里头,你所注册的主题名!echarts.registerTheme('macarons', { ＂color＂: [ .... ],....});

田东县19687758767： 怎么快速使用ECharts绘制可视化图表 - ？
尹杰龙胆： ECharts ECharts提供的用法中,require是作为模块化加载的入口,如果你使用类似于RequireJS、SeaJS这样的模块化加载JS库的话,那么,就可以使用require()初始化ECharts. 你贴出来的链接这篇文章,正式介绍如何使用模块化