Echarts数据可视化
Posted 苦海123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts数据可视化相关的知识，希望对你有一定的参考价值。
数据可视化概念：
把数据以图表的方式体现，更加直观可见，如下文字和图表对比：
数据可视化实现的方式：
报表类：Excel 、水晶报表等，面向非技术人员，点击图标即可生成图表，非常不灵活。
商业智能BI：Microsoft BI 、Power-BI等，也可以展示图表信息，并且可以自己做出决策，
编码类：Echarts.js、D3.js、Chart.js等，灵活性高，可视化度高，需要有编码经验的工程师才能开发。
echarts简介：
ECharts是一款基于javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，兼容性极好，支持pc和移动等多端，开源免费，社区活跃，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目；JavaScript数据可视化库有很多种，常用的如：D3.js、Recharts、Chart.js等，ECharts 其官网：https://echarts.apache.org/zh/index.html
多种数据格式支持：
key-value、二维表、typedarray格式
流数据的支持:支持加载多少数据，渲染多少数据。
增量渲染技术：变化的渲染数据，可以提高性能。
Echarts基本使用：
1.引入echarts.js文件：框架开发中支持模块化导入
2.准备一个呈现图表的容器（div）:给上尺寸
3.初始化echarts实例对象：
4.准备配置项：
5.将配置项设置给echarts实例对象
原生js中使用：
<body>
<!-- 1.引入echarts.js文件：,如果是在vue等框架的支持下，可以使用模块化引入 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<!-- 2.准备一个呈现图表的容器（div）: -->
<div style="width: 600px;height:500px"></div>
<script>
// 3.初始化一个echarts实例对象：init方法中将容器传入：init第二个参数表示主题light/dark，默认light
// 除了给init方法传入第二个参数修改主题外，还支持自定义主题，自定义主题修改方式：进入网址对自己的主题编辑后进行下载js代码：https://echarts.apache.org/zh/theme-builder.html，之后引入js代码，并将init第二个参数名称改为自己主题命名的自定义主题名称。
const myChart = echarts.init(document.querySelector('div'),'dark')
// 4.准备配置项：
const options =
// 全局配置调色
// color: ['pink', 'blue'],
xAxis:
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
,
yAxis:
type: 'value'
,
series: [
name: '服装销量',
type: 'bar',
data: [5, 7, 8, 20, 2, 7, 8, 15, 5, 12, 15, 18, 12],
// 局部配置调色
color: ['skyblue','#000000'],
// 跟随数据显示不同的颜色，colorBy，itemStyle中color不能同时存在
colorBy: 'data',
itemStyle:
// 调色盘除配置单色外还可以配置渐变色
color:
// 渐变类型：linear线性渐变/radial径向渐变
type: 'linear',
// 配置起始和结束位置
x:0,
y:0,
// 如果是径向渐变，那么x2和y2用r代替即可
x2:1,
y2:1,
// 配置颜色种类
colorStops: [
offset:0,
color:'skyblue'
,
offset:1,
color:'yellow'
]
,
name: '服装销量',
type: 'line',
data: [5, 7, 8, 20, 2, 7, 8, 15, 5, 12, 15, 18, 12]
]
// 5.将配置项设置给echarts实例对象
myChart.setOption(options)
</script>
</body>
vue中使用：
<template>
<!-- 主要盒子 -->
<div style="width: 100%;height:100%">
<!-- 2.准备一个呈现图表的容器（div） -->
<div ref="alarm" style="width: 600px;height:500px"></div>
</div>
</template>
<script>
// 1.导入echarts库，首先npm install echarts 下载库
import * as echarts from 'echarts'
export default
mounted ()
// *2组件挂载后再调用方法，否则无法生成图表
this.barEchartsHandle()
,
methods:
// *1创建一个方法用来生成图表
barEchartsHandle ()
// 3.初始化一个echarts实例对象：init方法中将容器传入：
const myChart = echarts.init(this.$refs.alarm)
// 4.准备配置项：
const options =
xAxis:
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
,
yAxis:
type: 'value'
,
series: [
name: '服装销量',
type: 'bar',
data: [5, 7, 8, 20, 2, 7, 8, 15, 5, 12, 15, 18, 12]
,
name: '服装销量',
type: 'line',
data: [5, 7, 8, 20, 2, 7, 8, 15, 5, 12, 15, 18, 12]
]
// 5.将配置项设置给echarts实例对象
myChart.setOption(options)
</script>
<style lang="less" scoped></style>
效果图：
echarts中配置项options
echarts中配置项options配置非常多，下面简单介绍常用配置项：
通用配置：这些通用配置会在下面Echarts中常用7大类图表中体现出，稍微注意就可以。
标题title（标题样式textStyle、标题宽度borderWidth、标题颜色borderColor、标题圆角borderRadius）
提示框tooltip，鼠标滑过会出现提示框，触发类型trigger(item/axis)、触发时机triggerOn(mousemove/click)、格式化formatter(可以接收字符串、模板字符串、有返回值的回调函数，模板变量时有特殊含义变量：系列名a、数据名b、数据值c、d、e、)，属性较多，粘上官方文档：https://echarts.apache.org/zh/option.html#%2Fsearch%2Fformatter
工具按钮toolbox提供导出图片、重置试图、动态类型切换、数据区域缩放、数据试图五个工具
图例legend
样式：可以给某个item设置不同的样式，可分为：直接样式（itemStyle/textStyle/lineStyle/areaStyle/label）和高亮样式（在emphasis中包裹itemStyle/textStyle/lineStyle/areaStyle/label）
**重新熏染图表：**根据浏览器大小重新渲染图表大小，init的实例下有方法：resize()
加载动画：init的实例下有方法：showLoading()/hideLoading()
**私有配置：**不同的类型表有自己私有的配置属性，下面会有案例说明。
增量动画：如果要改变图表中的某些数据，还想要动画的方式体现，此时可以直接创建一个新的数据options配置对象，之后设置给原来的实例（setOption()），这里不会完全覆盖，它只会将不同的数据进行整合
Echarts中常用7大类图表：
1.柱状图：
// 配置项介绍：
const options =
// 1.title:配置图表标题：
title:
// text:标题文本
text: '服装每月销售量',
// link：配置标题超链接跳转
link: 'http:www.baidu.com',
// textStyle:配置标题样式：
textStyle:
// color：配置标题颜色，还有部分常用属性：
color: 'skyBlue'
,
// 标题边框宽度
borderWidth: 2,
// 标题边框颜色
borderColor: 'yellow',
// 标题边框圆角
borderRadius: 5,
// 标题距离左边距离,标题位置有4个属性，分别：left、top、bottom、right
left: 30,
// 标题距离顶部边距离
top: 10
,
// 3.tooltip提示框
tooltip:
// trigger触发类型：axis表示鼠标移动到轴就可以触发提示框，item表示鼠标移动到柱子上才会显示提示框
// trigger: 'item',//主要在散点图，饼图等无类目轴的图表中使用
trigger: 'axis',
// triggerOn触发时机，默认mousemove表示鼠标滑过触发提示框显示，click表示点击时触发提示框显示
triggerOn: 'mousemove',
// formatter自定义提示框内容：直接写字符串会直接输出字符串，当为模板字符串时，会自动展示模板变量数据，多个series项时只显示第一个的数据，除非隐藏掉其他的后才会显示非第一个，模板变量规定规则：https://echarts.apache.org/zh/option.html#%2Fsearch%2Fformatter
// formatter: `b的销量为：c`
// formatter后面接函数时，函数参数为一个数组，每个数组元素表示一个item项，第一个元素表示鼠标经过的元素本身(当然数组中只有一个元素)
formatter: (e) =>
// console.log(e)
return `<div style='background:skyblue;color:#fff;'>$e[0].name的销量为：$e[0].data</div>`
,
// 4.toolbox工具框
toolbox:
// feature需要开启的工具功能有：
feature:
// 导出图片
saveAsImage: ,
// 数据视图
dataView: ,
// 重置
restore: ,
// 区域缩放
dataZoom:
yAxisIndex: 'none'
,
// magicType启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式,series有多个对象配置时生效）
magicType: type: ['line', 'bar','stack'] ,
,
// 3.xAxis：直角坐标系中X轴
xAxis:
// type：轴类型：类目category、数值value;类目轴需要配置data轴数据，而value类型数据时series中data数据
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
,
//4. yAxis：直角坐标系中y轴
yAxis:
type: 'value'
,
// 5.legend控制系列中某个对象显示或隐藏
legend:
// data中的数组元素和series中对象的name保持一直
data: ['服装销量','餐饮销量']
,
// 6.series:系列列表，里面每个对象将生成一种类型的图表,每种图表类型可根据实际情况选择不同的类型，但是要合理，如在直角坐标系中显示饼图就不太合理了
series: [
// name:图表名称
name: '服装销量',
// type:图表类型名称，柱状图bar、折线图line、饼图pie
type: 'bar',
// 值数据：
data: [5, 7, 8, 20, 2, 7, 8, 15, 5, 12, 15, 18, 12],
// markPoint：配置标记点
markPoint:
// data需要标记的元素
data: [
// type:标记元素的类型
type: 'max',
// name:标记元素的名称
name: '最大值'
,
type: 'min',
name: '最小值'
]
,
// markLine配置标记线
markLine:
data: [
type: 'average',
name: '平均值'
]
,
// label:配置显示详细数据
label:
show: true,
// rotate数值旋转显示
rotate: 60,
// position:配置数值位置，默认inside内部
position: 'top'
,
// barWidth配置柱状图宽度
barWidth: '20%'
,
name: '餐饮销量',
type: 'line',
data: [15, 17, 18, 30, 12, 17, 18, 25, 15, 22, 15, 28, 22],
markPoint:
data: [
type: 'max',
name: '最大值'
,
type: 'min',
name: '最小值'
]
,
markLine:
data: [
type: 'average',
name: '平均值'
]
,
label:
show: true,
rotate: 0,
position: 'top'
]
2.折线图：
// 配置项介绍：
const options =
// 1.title:配置图表标题：
title:
// text:标题文本
text: '服装每月销售量',
// link：配置标题超链接跳转
link: 'http:www.baidu.com',
// textStyle:配置标题样式：
textStyle:
// color：配置标题颜色，还有部分常用属性：
color: 'skyBlue'
,
// 标题边框宽度
borderWidth: 2,
// 标题边框颜色
borderColor: 'yellow',
// 标题边框圆角
borderRadius: 5,
// 标题距离左边距离,标题位置有4个属性，分别：left、top、bottom、right
left: 30,
// 标题距离顶部边距离
top: 10
,
// 3.tooltip提示框
tooltip:
// trigger触发类型：axis表示鼠标移动到轴就可以触发提示框，item表示鼠标移动到柱子上才会显示提示框
// trigger: 'item',//主要在散点图，饼图等无类目轴的图表中使用
trigger: 'axis',
// triggerOn触发时机，默认mousemove表示鼠标滑过触发提示框显示，click表示点击时触发提示框显示
triggerOn: 'mousemove',
// formatter自定义提示框内容：直接写字符串会直接输出字符串，当为模板字符串时，会自动展示模板变量数据，多个series项时只显示第一个的数据，除非隐藏掉其他的后才会显示非第一个，模板变量规定规则：https://echarts.apache.org/zh/option.html#%2Fsearch%2Fformatter
// formatter: `b的销量为：c`
// formatter后面接函数时，函数参数为一个数组，每个数组元素表示一个item项，第一个元素表示鼠标经过的元素本身(当然数组中只有一个元素)
formatter: (e) =>
// console.log(e)
return `<div style='background:skyblue;color:#fff;'>$e[0].name的销量为：$e[0].data</div>`
,
// 4.toolbox工具框
toolbox:
// feature需要开启的工具功能有：
feature:
// 导出图片
saveAsImage: ,
// 数据视图
dataView: ,
// 重置
restore: ,
// 区域缩放
dataZoom:
yAxisIndex: 'none'
,
// magicType启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式,series有多个对象配置时生效）
magicType: type: ['line', 'bar','stack'] ,
,
// 3.xAxis：直角坐标系中X轴
xAxis:
// type：轴类型：类目category、数值value;类目轴需要配置data轴数据，而value类型数据时series中data数据
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
// 设置第一个点是否在y轴上，默认第一个点和y轴之间有距离
boundaryGap: false
,
//4. yAxis：直角坐标系中y轴
yAxis:
type: 'value',
// 配置数值轴坐标值是否不从0开始计算
scale: true
,
// 6.series:系列列表，里面每个对象将生成一种类型的图表
series: [
// name:图表名称
name: '服装销量',
// type:图表类型名称，柱状图bar、折线图line、饼图pie
type: 'line',
// 值数据：
data: [5, 6以上是关于Echarts数据可视化的主要内容，如果未能解决你的问题，请参考以下文章