vue+echarts 实现两个小例子

何处锦绣不灰堆 2020-11-13 12:55:57
vue 实现 Echarts 两个 vue+echarts


echarts
来吧,今天写一个关于vue+echarts绘制图表的教程,写的原因很简单, 最近有不少人问,这是其一,其二是我的博客里面没有一片关于echarts的相对比较能看的教程,所以今天就写一篇,我们以折线图和饼图作为例子实现,原因是他们的数据格式相对柱状图来讲比较简单,这个学会了,可以应付绝大多数的图表,当然不包括3D图,虽然echarts支持3D图的绘制,但是这里不涉及,本文主要从几个注意的点说,因为毕竟怎么使用它已经被广大的博友写烂了,这里也就不耽误时间。
引入:

如果你是vue2.0的版本,引入的方式还是一样:
npm install echarts
如果是vue3.0的话,引入方式稍微改变:
npm add echarts
全局引入它:
import echarts from 'echarts
Vue.prototype.$echarts = echarts
按需引入:
let echarts = require("echarts/lib/echarts");
// 引入折线图等组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/radar");
// 引入提示框和title组件,图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
上面是如何引入它,不多废话,下面说如何使用它

在这里插入图片描述

 //生成折线图
drowChart_line() {

let _this = this;
let workflow_line = _this.$echarts.init(document.getElementById('workflow_line'), 'light')
workflow_line.setOption({

legend: {

data: this.line_desc// 描述信息
//格式:["OCMS","UPM"]
},
xAxis: {

type: 'category',
data: this.month_line_Lists, // x轴数据
//格式:["30","31","32","33","34","35","36","37","38","39"]
name: this.line_unit, // x轴名称单位
// x轴名称样式
nameTextStyle: {

fontWeight: 600,
fontSize: 18
}
},
yAxis: {

type: 'value',
// y轴名称样式
nameTextStyle: {

fontWeight: 600,
fontSize: 18
}
},
tooltip: {

trigger: 'axis' // axis item none三个值
confine: true,
},
series: this.series_line_Lists
},true) //这里的true一定要有,不然的话会导致你的图表不根据数据的变化进行更新
},
  • 这里的this.series_line_Lists格式为:
[{
"name":"OCMS","data":[0,2,0,1,2,0,0,0,0,0],"type":"line"},{
"name":"UPM","data":[0,0,0,1,0,0,0,0,0,0],"type":"line"}]}}
注意的点:
  • 末尾的true

这里的true如果不加的话,会导致vue的数据更新了,视图层面的数据也更新了,但是折线图却没有任何更新

  • 函数执行结束绘制图表

echarts使用的是canvas绘制,如果你说的数据是在图出现以后返回的,会导致绘制失败,如果你的数据是在data里面定义的,那么你需要保证数据加载结束进行绘制图表,所以你的绘制函数需要在mounted里执行,这样就保证了数据加载结束进行绘制图表了。

  • confine

这个属性是说我们的提示浮层不会超出div的限制,会一直随着鼠标移动达到跟随的一个效果,这也是网上最头疼的一个事情

  • legend

这个属性是类型图例或者备注的一个东西,一般的话,默认的配置就是可以的的,但是如果你的数据项比较多的时候,配置一下type: ‘scroll’,就需要分页展示了,例如下图:
在这里插入图片描述
在这里插入图片描述

饼图
drowChart_pie() {

let _this = this;
// 基于准备好的dom,初始化echarts实例
let workflow_pie = this.$echarts.init(document.getElementById('workflow_pie'), 'light')
this.loading = false
workflow_pie.setOption({

tooltip: {

trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {

type: 'scroll',
orient: 'vertical',
left: 'left',
data: this.desc_data
//['p1','p2','p3','p4']
},
series: [
{

name: '来源',
type: 'pie',
radius: '70%',
center: ['50%', '60%'],
data: this.series_data,
//[{name:'p1',value:2},{name:'p2',value:4},{name:'p3',value:2},{name:'p4',value:3},]
itemStyle: {

emphasis: {

shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {

label: {

show: true,
//position: 'inner', //在内部显示
//formatter: '{b} : {c} ({d}%)'
formatter: '{b} : {c} ({d}%)' //只显示百分比
},
labelLine: {
show: true}, //是否显示连接线
}
},
emphasis: {

itemStyle: {

shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
],
})
}

这里的两个demo只是想介绍一下echarts怎么使用,别的一些图表也都只是一些data格式不同,刚好这两个demo是我使用的,所以借此机会记录一下,中间的一些坑也可以帮助一些和我一样对这个不熟悉这个的小伙伴当作一个参考

版权声明
本文为[何处锦绣不灰堆]所创,转载请带上原文链接,感谢
https://clearlove.blog.csdn.net/article/details/108616145

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple