vue

2024-07-09 02:03| 来源: 网络整理| 查看: 265

在前端开发中，数据展示是必须开发的一个页面，对于数据展示的形式可以以表格和不同图形的多样化展示。那么，今天来学习一下echarts怎么引入到vue项目中，实现数据的图像化展示。

开发页面效果展示

可切换为表格、柱形图、折线图显示方式

制作步骤

1.安装eachats

npm install echarts --save

2.全局引入或者局部引入echarts

全局引入：在【main.js】文件中引入。缺点：全局引入会将所有的echarts图表打包，导致体积过大。

import echarts from 'echarts'; Vue.prototype.$echarts = echarts;

局部引入：在需要使用的页面引入，

import echarts from "echarts";

3.绘图准备及绘图

3.1 写好dom数据显示区域如下：

注意：柱形图和折线图区域一定要加上宽度高度样式，否则将显示不出图形。

3.2 基于准备好的dom，初始化echarts实例，【 var myChart = echarts.init(document.getElementById("histogram"));】

并为其设置数据配置【 myChart.setOption(option);】

柱形图和折线图区别：下面代码中【series】中分别为【type:"bar"】、【type:"line"】

//绘制柱形图 drawHistogram() { var myChart = echarts.init(document.getElementById("histogram")); // 准备配置 let option = { tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "shadow" // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data: [ "直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎", "百度", "谷歌", "必应", "其他" ] }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true }, xAxis: [ { type: "category", data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] } ], yAxis: [ { type: "value" } ], series: [ { name: "直接访问", type: "bar", data: [320, 332, 301, 334, 390, 330, 320] }, { name: "邮件营销", type: "bar", stack: "广告", data: [120, 132, 101, 134, 90, 230, 210] }, { name: "联盟广告", type: "bar", stack: "广告", data: [220, 182, 191, 234, 290, 330, 310] }, { name: "视频广告", type: "bar", stack: "广告", data: [150, 232, 201, 154, 190, 330, 410] }, { name: "搜索引擎", type: "bar", data: [862, 1018, 964, 1026, 1679, 1600, 1570], markLine: { lineStyle: { normal: { type: "dashed" } }, data: [[{ type: "min" }, { type: "max" }]] } }, { name: "百度", type: "bar", barWidth: 5, stack: "搜索引擎", data: [620, 732, 701, 734, 1090, 1130, 1120] }, { name: "谷歌", type: "bar", stack: "搜索引擎", data: [120, 132, 101, 134, 290, 230, 220] }, { name: "必应", type: "bar", stack: "搜索引擎", data: [60, 72, 71, 74, 190, 130, 110] }, { name: "其他", type: "bar", stack: "搜索引擎", data: [62, 82, 91, 84, 109, 110, 120] } ] }; // 使用这个配置 myChart.setOption(option); },

注意：上面的绘制图形的方法要写在【mounted（）】钩子函数中，当页面显示时即出现图形。实际开发中，先从后台获取图形数据，然后调用绘图方法。

可以将绘图方法进行封装，传入【id】和【series】

【本文地址】

公司简介

联系我们