Vue使用echarts制作好看的图表（一） |
您所在的位置：网站首页 › 营业额数据分析图表模板 › Vue使用echarts制作好看的图表（一） |
Vue使用echarts制作好看的图表（一）
|
Apache ECharts，一个基于 JavaScript 的开源可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。 ECharts安装与卸载 安装最新版 npm install echarts --save 安装指定版本，例如4.8.0 npm install [email protected] --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的第二个参数。
完整代码： 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 } ] } ] }) } }2）折线图（type:line），右上角工具栏可以保存图片或者切换折线图、柱状图、堆叠模式。 折线图 柱状图
堆叠模式
需要注意的是配置项要设置containLabel: true，避免标签溢出的情况，如下图： 完整代码 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] } ] }) } }3）进度仪表盘（type:gauge），隐藏仪表盘指针、刻度标签、刻度和分隔线，得到下图效果。 完整代码 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: "好评数" } ] } ] }) } }先记录上述三个图表，下一期随缘更新（咕咕咕~） 希望你我逐渐优秀 |
【本文地址】
今日新闻 |
推荐新闻 |