Vue Element UI 之ECharts图表
发布日期:2021-10-13 12:43:46
浏览次数:1
分类:技术文章
本文共 2513 字,大约阅读时间需要 8 分钟。
echarts官网:
echarts官网手册: 菜鸟教程: 菜鸟教程在线编辑器:
文章目录
一、使用案例
情形一:在Vue组件中使用
echarts 使用主要有以下几个步骤:
Step1. 下载安装
在项目中安装echarts,安装方式有多种,这里采用 npm 方法
npm install echarts --save
Step2. 使用 echarts
接下来讲的是在组件化开发中的使用方法
首先,你要先有一个组件
接下来,是 echarts 的使用步骤
Step2.1 导入 echarts
Step2.2 创建 DOM
注意:创建的DOM 应该具备宽高
Step2.3 初始化 echarts 和填充数据
注意:这步操作应该放在 mounted 中,即在 DOM 渲染完成之后触发,显示 echarts 图表
此步骤具体分为三步:
(1)基于准备好的 DOM,初始化 echarts 实例 (2)发起数据请求,获取数据(json 格式) (3)setOption// DOM 渲染完成触发mounted() { // 1. 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts_box')) // 2. 发起请求,获取数据 const { data: res } = await this.$http.get('reports/type/1') if (res.meta.status !== 200) { return this.$message.error('获取折线图数据失败!') } // 3. 使用刚指定的配置项和数据,显示图表 myChart.setOption(data)}
完整实例代码
情形二:在 html 页面中使用
过程和上面差不多,只是这里不需要下载安装 echarts,可以直接通过 CDN 引入;或者将 echarts.js 文件下载到本地引入,这里和普通的 js 文件引入一样。
附上一个教程实例
第一个 ECharts 实例 // 1. 引入 echarts.js // 2. 准备DOM
运行效果展示
二、echarts 中数据的说明
通过上面的实例,大概对 echarts 有了初步了解。下面针对 json 数据项进行分析,空口白话讲解不易理解,下面通过结合一个折线图细细道来~~
1. setOption(data)
setOption() 方法的参数 data 要求为 json 格式的数据,表示使用 json 数据格式的配置来绘制图表
2. 标题 title
即给图表配置的标题,通过 title 实现
title: { text: '用户来源'}
3. 提示信息 tooltip
配置提示信息,是鼠标移入图表上某位置时,显示出该位置对应的数据信息,实际效果如图
部分代码如下所示tooltip: { trigger: "axis", axisPointer: { type: "cross", label: { backgroundColor: "#76baf1" } }}
4. 图例组件 legend
概念:图例组件展现了不同 系列 的标记(symbol)、颜色、名字,可以通过点击图例控制哪些系列不显示
图示:在折线图中,legend 对应的是每条折线的系列
legend: { data: ["华东","华南","华北","西部","其他"]}
5. X 轴 xAxis
配置要在 X 轴显示的项
xAxis: { data: ["2017-12-27","2017-12-28","2017-12-29","2017-12-30","2017-12-31", "2018-1-1"]}
6. Y 轴 yAxis
配置要在 Y 轴显示的项
yAxis: { type: "value"}
7. 系列列表 series
每个 系列 的详情
series: [ { name: "华东", type: "line", stack: "总量", areaStyle: { normal: { }}, data: [999,3111,4100,3565,3528,6000] }, { name: "华南", type: "line", stack: "总量", areaStyle: { normal: { }}, data: [5090,2500,3400,6000,6400,7800] }, ……]
8. 类型 type
每个 系列 通过 type 决定自己的图表类型
type: 'bar':柱状/条形图type: 'line':折线/面积图type: 'pie':饼图type: 'scatter':散点(气泡)图type: 'effectScatter':带有涟漪特效动画的散点(气泡)type: 'radar':雷达图type: 'tree':树型图type: 'treemap':树型图type: 'sunburst':旭日图type: 'boxplot':箱形图type: 'candlestick':K线图type: 'heatmap':热力图type: 'map':地图type: 'parallel':平行坐标系的系列type: 'lines':线图type: 'graph':关系图type: 'sankey':桑基图type: 'funnel':漏斗图type: 'gauge':仪表盘type: 'pictorialBar':象形柱图type: 'themeRiver':主题河流type: 'custom':自定义系列
附:data 数据截图
转载地址:https://blog.csdn.net/qq_41956139/article/details/104618285 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年03月25日 23时34分05秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
RDLC报表打印尺寸不匹配的问题
2019-04-25
Dev GridControl控件行拖拽实现
2019-04-25
GridControl分页
2019-04-25
DevExpress gridcontrol 分组显示
2019-04-25
违反并发性: UpdateCommand影响了预期 1 条记录中的 0 条
2019-04-25
C#文件相关操作
2019-04-25
C# INI文件操作
2019-04-25
Codeforces Round #726 (Div. 2)
2019-04-25
springboot 发送,简单,html格式,带本地附件,带远程附件邮件详解
2019-04-25
java读取SHP格式文件,解决中文乱码
2019-04-25
Mysql执行单个sql脚本、执行多个sql脚本
2019-04-25
Oracle 导入导出数据库脚本
2019-04-25
SpringBoot 集成webSocket 打成jar包ba
2019-04-25
富文本编辑的内容导出为word
2019-04-25
字节跳动:估值迷雾下各自的小九九
2019-04-25
sql注入
2019-04-25
textarea在光标后追加内容,并将换行符替换成br标签
2019-04-25
kafka客户端脚本windows版
2019-04-25
zookeeper基础教程
2019-04-25
zookeeper单机版安装教程
2019-04-25