Vue中使用ECharts制作的一个统计分析页面

2024-07-12 22:47| 来源: 网络整理| 查看: 265

ECharts是百度团队制作的，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts官网实例

以下效果使用的静态数据，如需动态，自行依需修改即可。效果图

效果网站链接https://livequeen.top

步骤

第一步，在引入依赖的时候，需要选择旧版本，因为从2022年开始默认的5.0以上版本会出现渲染问题。

npm install [email protected] --save

第二步，如需全局导入，在main.js中添加如下（建议的是不要全局导入，按需来）

import Vue from 'vue' import echarts from 'echarts' //需要挂载到Vue原型上 Vue.prototype.$echarts = echarts

第三步，分别配置3个ECharts的vue子组件，分别代码如下（可直接复制粘贴使用）：

1、折线图=>@/ECharts/echarts1.vue/

import echarts from 'echarts' const colors = ['#5470C6', '#EE6666'] export default { name: 'echarts1', data () { return { // option配置 option: { color: colors, tooltip: { trigger: 'none', axisPointer: { type: 'cross' } }, legend: {}, grid: { top: 70, bottom: 50 }, xAxis: [ { type: 'category', axisTick: { alignWithLabel: true }, axisLine: { onZero: false, lineStyle: { color: colors[1] } }, axisPointer: { label: { formatter: function (params) { return ( 'Precipitation ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '') ) } } }, // prettier-ignore data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12'] }, { type: 'category', axisTick: { alignWithLabel: true }, axisLine: { onZero: false, lineStyle: { color: colors[0] } }, axisPointer: { label: { formatter: function (params) { return ( 'Precipitation ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '') ) } } }, // prettier-ignore data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12'] } ], yAxis: [ { type: 'value' } ], series: [ { name: 'Precipitation(2015)', type: 'line', xAxisIndex: 1, smooth: true, emphasis: { focus: 'series' }, data: [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 ] }, { name: 'Precipitation(2016)', type: 'line', smooth: true, emphasis: { focus: 'series' }, data: [ 3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7 ] } ] } } }, mounted () { this.echartsInit() }, methods: { echartsInit () { // 在生命周期中挂载 echarts.init(document.getElementById('echarts1')).setOption(this.option) } } }

2、饼状图=>@/ECharts/echarts2.vue/

import echarts from 'echarts' export default { name: 'echarts2', data () { return { // option配置 option: { title: { text: 'Referer of a Website', subtext: 'Fake Data', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: 'Access From', type: 'pie', radius: '50%', data: [ { value: 1048, name: 'Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union' }, { value: 300, name: 'Video' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } } }, mounted () { this.echartsInit() }, methods: { echartsInit () { // 在生命周期中挂载 echarts.init(document.getElementById('echarts2')).setOption(this.option) } } }

3、正六边形图=>@/ECharts/echarts3.vue/

import echarts from 'echarts' export default { name: 'echarts3', data () { return { // option配置 option: { legend: { data: ['Allocated Budget', 'Actual Spending'] }, radar: { // shape: 'circle', indicator: [ { name: 'Sales', max: 6500 }, { name: 'Administration', max: 16000 }, { name: 'Information Technology', max: 30000 }, { name: 'Customer Support', max: 38000 }, { name: 'Development', max: 52000 }, { name: 'Marketing', max: 25000 } ] }, series: [ { name: 'Budget vs spending', type: 'radar', data: [ { value: [4200, 3000, 20000, 35000, 50000, 18000], name: 'Allocated Budget' }, { value: [5000, 14000, 28000, 26000, 42000, 21000], name: 'Actual Spending' } ] } ] } } }, mounted () { this.echartsInit() }, methods: { echartsInit () { // 在生命周期中挂载 echarts.init(document.getElementById('echarts3')).setOption(this.option) } } }

第四步，配置统计页面home.vue（@/Home/home.vue/），引入3个ECharts子组件，就完成了。

代码如下（可直接复制粘贴）：

商品本月销量 2424132 累计用户数 12763 消费增长率 28% 入驻商家数 358 import echarts1 from './ECharts/echarts1' import echarts2 from './ECharts/echarts2' import echarts3 from './ECharts/echarts3' export default { name: 'home', components: { echarts1, echarts2, echarts3 } } .el-card{ margin-bottom: 20px; text-align: center; }

【本文地址】

公司简介

联系我们