前端开发是很多朋友有关注的类型,那么前端web开发要求echarts 前端用echarts实现表格形柱形图的有哪些,我爱编程网为大家带来了相关文章,希望给大家提供参考。
在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" :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组件图片自适应显示
我爱编程网
web前端工程师知识支撑有什么
与其他计算机主流技术所不同的是,Web前端所包含的知识模块很多,就目前而言,HTML、CSS、JS、DOM是目前前端技术最为基础也是最为主要的四大模块,但会随着实际需求而有所改变。
-
一名优秀的Web前端工程师,需要JavaScript语言基础扎实,具有良好的规范开发习惯;
-
熟悉常用的设计模式,
-
能够熟练使用angular、vue、echarts、jquery、react等框架进行传统开发;
-
要熟悉MVVM、MVC开发模式;
-
熟悉前端工程化、自动化技术,可以根据需求配置Gulp文件及更改Webpack配置文件;
-
熟练使用git版本管理工具。
-
还要熟悉HTML5、CSS3的新特性,
-
了解不同浏览器之间的差异,制作出的页面能够有很好的兼容性。
前端用echarts实现表格形柱形图的有哪些
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性 化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表 盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展 现。模块化单文件引入(推荐)1新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom,2新建script标签引入模块化单文件echarts.js,3新建script标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js),4script标签内动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成,5浏览器中打开ecarts.html,就可以看到以下效果,:END标签式单文件引入新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom,新建script标签引入echart-all.js,新建script,使用全局变量echarts初始化图表并驱动图表的生成,浏览器中打开echarts.html,可以看到如下效果,
以上就是我爱编程网为大家带来的前端web开发要求echarts 前端用echarts实现表格形柱形图的有哪些,希望能帮助到大家,了解更多相关信息,敬请关注我爱编程网。