Vue使用echarts制作好看的图表（一）

Apache ECharts，一个基于 JavaScript 的开源可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

ECharts安装与卸载

安装最新版 npm install echarts --save

安装指定版本，例如4.8.0 npm install echarts@4.8.0 --save

卸载 npm uninstall echarts

 Echarts 5添加了许多新特性，这里我选择安装最新版，目前为5.0.2。需要注意的是，echarts 5.x（以下简称 v5）和 echarts 4.x（以下简称 v4）的引用方式是不同的，具体写法如下：

v4全局引用 import echarts from 'echarts'

v4按需引入 import echarts from 'echarts/lib/echarts'

v5全局引用 import * as echarts from 'echarts'

v5按需引入 import * as echarts from 'echarts/lib/echarts'

 其他变化可查看ECharts官网

下面记录几个项目中设计的图表：

1）环形图，饼图（type:pie）自定义而来，自定义了label分布在labelLine两侧，关键配置padding: [0, -60]和overflow: 'none'。label标签的文字如果因为过长导致省略，可缩小radius的第二个参数。

完整代码：

<template><div><div ref="myChart" style="width: 400px; height: 400px; background-color: #ffffff; padding: 20px; border-radius: 20px;"></div></div> </template><script> import * as echarts from 'echarts'export default {mounted() {this.myChart = echarts.init(this.$refs.myChart)this.myChart.setOption({title: {text: '32469',subtext: '评价数',left: 'center',top: '43%',subtextStyle: {fontSize: 18}},tooltip: {trigger: 'item'},legend: {icon: 'circle',top: '0',left: 'right'},series: [{name: '咨询数量',type: 'pie',radius: ['40%', '55%'],label: {show: true,padding: [0, -60],overflow: 'none',fontSize: '15',fontWeight: 'bold',formatter: '{d}%\n\n{c}'},labelLine: {show: true,length: 15,length2: 60},itemStyle: {normal: {color: function (params) {var colorList = ['#4FC3F7', '#00C853', '#F57F17']return colorList[params.dataIndex]}}},data: [{ name: '好评', value: 1048 },{ name: '一般', value: 735 },{ name: '差评', value: 180 }]}]})} } </script>

2）折线图（type:line），右上角工具栏可以保存图片或者切换折线图、柱状图、堆叠模式。

折线图 

 

柱状图

堆叠模式

需要注意的是配置项要设置containLabel: true，避免标签溢出的情况，如下图：

 

完整代码

<template><div><div ref="lineChart" style="width: 800px; height: 400px; background-color: #ffffff; padding: 20px; border-radius: 20px;"></div></div> </template><script> import * as echarts from 'echarts'export default {mounted() {this.lineChart = echarts.init(this.$refs.lineChart)this.lineChart.setOption({title: {text: '评价数据分析'},// 提示框tooltip: {trigger: 'axis'},// 图例legend: {icon: 'circle',left: 'center',top: 0,data: ['好评', '一般', '差评']},grid: {left: '3%',right: '3%',bottom: '3%',containLabel: true},// 工具栏toolbox: {feature: {saveAsImage: {type: 'png'},magicType: {type: ['line', 'bar', 'stack']}}},xAxis: {type: 'category',boundaryGap: false,data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']},yAxis: {type: 'value'},series: [{name: '好评',type: 'line',// smooth: true, // 平滑曲线显示data: [120, 132, 101, 134, 190, 230, 210, 201, 234, 290, 230, 210]},{name: '一般',type: 'line',// smooth: true,data: [100, 82, 91, 54, 90, 76, 110, 81, 104, 90, 130, 110]},{name: '差评',type: 'line',stack: '总量',// smooth: true,data: [10, 22, 21, 14, 19, 13, 20, 11, 34, 29, 20, 10]}]})} } </script>

3）进度仪表盘（type:gauge），隐藏仪表盘指针、刻度标签、刻度和分隔线，得到下图效果。

 

完整代码

<template><div><div ref="gaugeChart" style="width: 400px; height: 400px; background-color: #ffffff; padding: 20px; border-radius: 20px;"></div></div> </template><script> import * as echarts from 'echarts'export default {mounted() {this.gaugeChart = echarts.init(this.$refs.gaugeChart)this.gaugeChart.setOption({series: [{name: '评价',type: 'gauge',center: ['50%', '55%'],radius: '75%',min: 0,max: 300,itemStyle: {color: '#4FC3F7',shadowColor: 'rgba(0,138,255,0.45)'},// 进度条progress: {show: true,width: 20,roundCap: true},// 坐标轴线axisLine: {show: true,roundCap: true,lineStyle: {width: 20}},// 仪表盘指针pointer: {show: false},// 刻度标签axisLabel: {show: false},// 刻度axisTick: {show: false},// 分隔线splitLine: {show: false},title: {offsetCenter: [0, '20%'],fontSize: 20},detail: {offsetCenter: [0, '-10%'],valueAnimation: true,textStyle: {fontSize: 30},formatter: '{value}'},data: [{ value: 270, name: "好评数" }]}]})} } </script>

先记录上述三个图表，下一期随缘更新（咕咕咕~）

希望你我逐渐优秀

总结

以上是生活随笔为你收集整理的Vue使用echarts制作好看的图表（一）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。