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: 'ze8trgl8bvbq%\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制作好看的图表（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。