Echarts 5.0 数据图表
一：简介Echarts数据图表
数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。其中Echarts包含折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表
1：Echarts介绍
ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender ，提供直观，
交互丰富，可高度个性化定制的数据可视化图表。
①：开源免费
它是开源免费的，也就是我们可以免费的使用 ECharts ，不需要缴纳任何的费用
②：功能丰富
它的功能非常的丰富，提供了各种各样的图表，支持各种各样的定制, 满足各种需求，比如折线图、柱状图、饼图、K线图等.
在他的官方示例中, 提供了上百种图表, 可以用 只有你想不到, 没有它做不到 这句话来形容
③：社区活跃
ECharts 的社区非常活跃，意味着你可以和很多开发者讨论，遇到了 ECharts 中不会的问题，也很容易找到解决办法
④多种数据的支持
可视化的含义就是将数据通过更加直观的图表的方式来呈现。图表只是一种呈现方式。最核心的其实是数据。 ECharts 对数据格式
的支持也是非常友好的。 ECharts 能够支持常见的 key-value 数据格式，还能支持二维表，或者 TypedArray 格式的数据
⑤流数据的支持
对于超大的数据量而言， 数据本身的体量可能就非常消耗资源, 而 ECharts 可以支持对流数据的动态渲染，加载多少数据就渲染
多少数据，省去了漫长的数据加载的等待时间, 他还提供了增量渲染的技术, 只渲染变化的数据, 提高系统的资源利用.
⑥：移动端的优化
⑦：跨平台
⑧：酷炫的特效,
⑨：数据的三维可视化
2：Echarts5.0基本说明
随着时间的推进，Echarts也再不断更新，到 Echarts5.0 的时候是个版本的大突破，更新了一些动态图表，也对以前版本的一些属性进行了更改，本文以5.0的的方式为大家讲解，再了解本文后，再次深入学习，官方API 是个很不错的选择
3：Echarts快速入门 Echarts.js下载
入门只需五步：引入echarts.js==>创建一个呈现图表的盒子==>初始化echarts==>准备配置项==>配置项设置到echarts实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>入门案例</title> </head> <body> <!-- 创建容器 --> <div id="main" style="width: 700px; height: 250px; border: 1px dashed #f69"></div> <!-- 导入Echarts.js --> <script src="./js/echarts.js"></script> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 let myChart = echarts.init(document.querySelector("#main")); //指定图表的配置项和数据（重要的全在这里面） let option = { //标题组件 title: {show:true, text: '入门示例'}, //图例组件。 legend: { show: true, data: ["语文", "数学"] }, //直角坐标系内绘图网格 grid:{left:'5%', top:'15%', right:'5%', bottom:'10%'}, //工具箱 toolbox:{ feature:{ saveAsImage:{show:true, type:'png', name:'图表图片'} } }, //直角坐标系 中的 x 轴, xAxis: { show: true, type:'category', data: ["张三", "李四", "王二", "麻子", "蚂蚁小哥"] }, //直角坐标系 中的 y 轴, yAxis: {show: true, type:'value'}, //系列列表。 series: [ {name: "语文", type: "bar", data: [82, 60, 45, 77, 86]}, {name: "数学", type: "bar", data: [82, 60, 45, 77, 86]} ], }; /**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/ //把刚才实例好的echarts对象里面设置数据和配置 myChart.setOption(option); //自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置 window.addEventListener("resize", () => { myChart.resize(); }); </script> </body> </html>
二：通用配置
对基本的图表认识后，接下来就说说Echarts里面的通用配置，分别为 标题title、提示框tooltip、工具箱toolbox、图例legend 结合文档学习更刺激，这里我只介绍常用的。
1：tite标题组件
使用标题组件我们可以构建出各种样式的主主题和副主题
一：普通属性 title:{} //显示模式 show: 是否显示标题组件 ==>默认true // 主标题 text: 主标题文本，支持'\n' link: 主标题文本超链接 target: 指定窗口打开主标题超链接 'self' 当前窗口打开 'blank' 新窗口打开 // 副标题 主标题一样使用 subtext、sublink、subtarget //关于对齐方式 textAlign: 主/副标题水平对齐 ==>默认auto 'auto','left','right','center' textVerticalAlign: 主/副标题垂直对齐 ==>默认auto 'auto','top','bottom','middle' // 关于间距 padding: 标题内边距，单位px，数组格式，5:四边内边距，[5,10]:上下5左右10，[5,2,3,1]:上右下左 itemGap: 主副标题之间的间距 ==>默认10 left、right、top、bottom: title组件离容器的位置 可设number值如20代表20px或String：10%位置 ==>默认auto // 关于样式 注 颜色值要为字符串类型如 '#f00' 'rgb(255,255,0)' backgroundColor: 标题背景色，默认透明 ==>默认transparent borderColor: 标题的边框颜色 borderWidth: 标题的边框线宽 borderRadius: 标题容器的圆角 如 5 代表四边5px 或[5,0,0,2]顺时针左上，右上，右下，左下 // 标题阴影 前提我们得设置show为true，还得设置容器的背景颜色 shadowBlur: 图形阴影的模糊大小 shadowColor: 阴影颜色 shadowOffsetX: 阴影水平方向上的偏移距离 shadowOffsetY: 阴影垂直方向上的偏移距离 二：对象属性 //标题文字样式设置 他们两个属性差不多 主标题：title.textStyle:{} 副标题：title.subtextStyle:{} color: 设置颜色 fontStyle: 字体风格 'normal'，'italic'，'oblique' fontWeight: 字体粗细 'normal'，'bold'，'bolder'，'lighter' / 100 | 200 | 300 | 400... fontFamily: 字体样式 fontSize: 字体大小 align: 文字水平对齐方式 'left','center','right' width: 文字显示宽度 height: 文本显示高度 ////////////////////////////////////////////////////////////////// //标题组件 title: { show:true, text: '入门示例', subtext:'您好', left:'10%', backgroundColor:'#f69', //设置标题组件背景色 borderRadius:[30,0,30,0], //设置圆角 shadowBlur:5, //图形阴影的模糊大小 shadowColor:'rgba(255,0,0,.8)', //阴影颜色 shadowOffsetX:5, //阴影水平方向上的偏移距离 shadowOffsetY:5, //阴影垂直方向上的偏移距离 //设置主标题文字样式，副标题用subtextStyle textStyle:{ fontSize:16, color:'rgba(255,255,0,.6)', } },
2：legend图例组件
legend 是图例,用于筛选类别,需要和 series 配合使用
图例对象 legend:{} //显示模式 show: 是否显示图例组件 ==>默认true type: 图例的类型 'plain'：普通图例 默认，'scroll'：可滚动的图例，图例数量较多使用。 symbolKeepAspect: 设置自定义图表是否开启 ==>默认true //对象属性图例数据设置 legend.data:{} name: 图例名称 icon: 图例图标 'circle','rect','roundRect','triangle','diamond','pin','arrow','none','image://图标地址' textStyle:{} 里面可以设置文字样式等等 //样式设置 backgroundColor: 图例背景色 borderColor: 图例的边框颜色 borderWidth: 图例的边框线宽 borderRadius: 图例容器的圆角 如 5 代表四边5px 或[5,0,0,2]顺时针左上，右上，右下，左下 // 图例阴影 前提我们得设置show为true，还得设置容器的背景颜色 shadowBlur: 图形阴影的模糊大小 shadowColor: 阴影颜色 shadowOffsetX: 阴影水平方向上的偏移距离 shadowOffsetY: 阴影垂直方向上的偏移距离 //关于间距 left,top,right,bottom:组件离容器的位置 可设number值如20代表20px或String：10%位置 ==>默认auto width,height: 图例组件的宽高 orient: 图例组件的布局朝向，水平/垂直 默认水平 'horizontal'水平，'vertical'垂直 align: 图例标记和文本的对齐(就是带颜色的方块是对齐文字的左边还是右边) padding: 图例内边局单位px 可传入数组或数值，设置背景色可以看清楚内边局大小 itemGap: 每个小图例与小图例之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔 number值为px itemWidth: 图例标记的图形宽度 number值为px itemHeight: 图例标记的图形高度 number值为px //自定义图例显示样式 formatter: 用来自定义格式化图例文字 String或Function格式 formatter: 'Legend {name}'使用字符串模板 formatter: function (name) {return 'Legend ' + name;}使用回调函数 tooltip: 当图例文字过多时隐藏部分，得先设置formatter formatter: function (name) {return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');}, tooltip: {show: true} icon: 全局自定义图例图标 'circle','rect','roundRect','triangle','diamond','pin','arrow','none','image://图标地址' //对象属性设置文字样式 legend.textStyle:{} 里面可以设置全局的字体样式 //其它 selectedMode: 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。 true、false、'single'一次只能选一个、'multiple'默认 inactiveColor: 图例关闭的颜色，前提selectedMode为true selected: 图例选中状态表 selected: {'语文': true,'数学': false} //下面一些属性在 legend.type 为 'scroll' 时有效 scrollDataIndex: 设置当前的图例页在第几个 pageButtonItemGap: 设图例控制块中按钮和页信息之间的间隔 pageButtonGap: 图例控制块和图例项之间的间隔 pageButtonPosition: 图例控制块的位置 'start'：控制块在左或上 'end'：控制块在右或下。 pageFormatter: 图例控制块中，页信息的显示格式 默认为 '{current}/{total}' 如'2/4' pageIconColor: 翻页按钮的颜色 pageIconInactiveColor: 前后尾页的翻页按钮颜色（即翻页到头时） pageIconSize: 翻页按钮的大小。可以是数字，也可以是数组，如 [10, 3]，表示 [宽，高]。 legend.pageTextStyle:{}:设置翻页按钮里面的文字样式 selectorItemGap: 选择器按钮之间的间隔 selectorButtonGap: 选择器按钮与图例组件之间的间隔 selectorPosition: 选择器的位置 'start'：控制块在左或上 'end'：控制块在右或下。 //动画 在 legend.type 为 'scroll' 时有效 animation: 图例翻页是否使用动画 animationDurationUpdate:图例翻页时的动画时长 毫秒单位 //全选反选 selector: 设置图例的全选和反选 true 或 false 或自定义[{type: 'all or inverse', title: 'xx'}, {type: 'inverse', title: 'xx'}]
type:'plain'使用，不存在翻页图例组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; border: 1px dashed #f69"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据（重要的全在这里面）
let option = {
//图例组件。
legend: {
show: true,
type: 'plain', //默认普通图列没有翻页
//设置图例数据，保证和series的name对应
//我对里面的指定文字进行了样式设置 设置语文加粗
data: [
{name: '语文', icon: 'diamond', textStyle: {fontWeight: 800}},
{name: '数学', icon: 'roundRect'},
{name: '英语', icon: 'circle'},],
orient: 'horizontal', //水平排列 默认
itemGap: 100, //图例的间隔
itemWidth: 30, //小图例图标宽
itemHeight: 30, //小图例图标高
textStyle: {color: '#f69'}, //设置图例字体的全局样式
backgroundColor: 'rgba(0,0,0,.4)',//设置图例背景
//设置图例组件的位置
left: '10%',
top: 10,
//设置阴影及偏离
shadowBlur: 2,
shadowColor: "#00f",
shadowOffsetX: 5,
shadowOffsetY: 5,
////自定义图例显示样式
formatter: function (name) {
return echarts.format.truncateText(name + "成绩情况", 60, '14px Microsoft Yahei', '…');
},
//图例选择的模式
selectedMode: 'single',
},
//直角坐标系 中的 x 轴,
xAxis: {
show: true,
type: 'category',
data: ["张三", "李四", "王二", "麻子", "蚂蚁小哥"]
},
//直角坐标系 中的 y 轴,
yAxis: {show: true, type: 'value'},
//系列列表。
series: [
{name: "语文", type: "bar", data: [82, 60, 45, 77, 86]},
{name: "数学", type: "bar", data: [23, 90, 85, 77, 35]},
{name: "英语", type: "bar", data: [54, 32, 45, 78, 75]}
],
};
/**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
//把刚才实例好的echarts对象里面设置数据和配置
myChart.setOption(option);
//自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
</body>
</html>
legend图例组件使用
type:'scroll'使用，存在翻页图例组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; border: 1px dashed #f69"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据（重要的全在这里面）
let option = {
//图例组件。
legend: {
show: true,
data: ["语文", "数学", "英语", "物理", "化学", "生物", "历史", "政治", "地理", "体育", "音乐", "美术"],
type: 'scroll', //可滚动的图例，
//设置图例组件背景
backgroundColor: 'rgba(0,0,0,.3)',
scrollDataIndex: 1, //设置当前最左边的图例是第几个 0开始 1是数学
pageButtonItemGap: 20, //设置图例控制块与中间的页码数据间隔
pageButtonGap: 20, //图例控制块和图例项之间的间隔
pageButtonPosition: 'start',//图例控制块的位置
//选择器按钮显示
selector: [
{type: 'all or inverse', title: '全选'},
{type: 'inverse', title: '反选'}
],
selectorItemGap: 20, //选择器按钮之间的间隔
animation: true, //翻页使用动画
animationDurationUpdate: 1500,//翻页动画1.5秒
},
//直角坐标系 中的 x 轴,
xAxis: {
show: true,
type: 'category',
data: ["张三", "李四", "王二", "麻子", "蚂蚁小哥"]
},
//直角坐标系 中的 y 轴,
yAxis: {show: true, type: 'value'},
//系列列表。
series: [
{name: "语文", type: "bar", data: [82, 60, 45, 77, 86]},
{name: "数学", type: "bar", data: [23, 90, 85, 77, 35]},
{name: "英语", type: "bar", data: [54, 32, 45, 78, 75]},
{name: "物理", type: "bar", data: [46, 56, 96, 99, 86]},
{name: "化学", type: "bar", data: [23, 45, 35, 25, 86]},
{name: "生物", type: "bar", data: [97, 78, 85, 78, 88]},
{name: "历史", type: "bar", data: [45, 36, 36, 96, 86]},
{name: "政治", type: "bar", data: [97, 45, 45, 35, 78]},
{name: "地理", type: "bar", data: [23, 78, 78, 78, 82]},
{name: "体育", type: "bar", data: [88, 96, 96, 89, 86]},
{name: "音乐", type: "bar", data: [34, 63, 78, 77, 49]},
{name: "美术", type: "bar", data: [89, 60, 45, 77, 86]}
],
};
/**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
//把刚才实例好的echarts对象里面设置数据和配置
myChart.setOption(option);
//自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
</body>
</html>
3：tooltip提示框组件
指的是当鼠标移入到图表或者点击图表时, 展示出的提示框
提示框组件可以设置在多种地方：文章会介绍这些，这里先说明全局的
可以设置在全局，即 tooltip
可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以设置在系列中，即 series.tooltip
可以设置在系列的每个数据项中，即 series.data.tooltip
提示框组件 tooltip:{} //显示模式 show: 是否显示提示框组件 ==>默认true trigger: 触发显示的提示框类型 默认'item' 'item'数据项图形触发，主要在散点图，饼图等无类目轴(x,y轴)的图表中使用 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用 'none'什么都不触发 和show设置false一个道理 showContent: 是否显示提示框浮层，默认显示,和show不一样，这个只会设置悬浮框 alwaysShowContent:是否永远显示提示框内容 默认移走容器则会自动消失 triggerOn: 提示框触发的条件 'mousemove'鼠标移动时触发,'click'鼠标点击时触发,'mousemove|click'同时鼠标移动和点击时触发,'none' showDelay: 浮层显示的延迟时间，单位为 ms，默认没有延迟 在 triggerOn 为 'mousemove' 时有效。 hideDelay: 浮层隐藏的延迟，单位为 ms enterable: 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。 confine: 是否将 tooltip 框限制在图表的区域内。 transitionDuration:提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动 position: 提示框浮层的位置，默认随鼠标移动 可以应用在提示框如在左上角不动的场景 取值px如:[10, 10] 取值%如:[10%, 10%] 以容器为基准定位 backgroundColor:悬浮提示框颜色 borderColor: 提示框浮层的边框颜色 borderWidth: 提示框浮层的边框宽 padding: 提示框浮层内边距 取值如 5 代表四边5px [5,3]上下5左右3 [2,6,5,8]上右下左 extraCssText: 额外附加到浮层的 css 样式。 如：'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' formatter: 设置数据格式，详见下个文件 textStyle:{} 提示框浮层的文本样式,内部包含悬浮框内部的各种样式，在设置formatter属性后使用 //⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐ //坐标轴指数配置器 tooltip.axisPointer:{} 坐标轴指示器配置项有如下属性 type: 指示器类型 'line'直线指示器,'shadow'阴影指示器,'none'无指示器,'cross'十字准星指示器 axis: 指示器的坐标轴 如以哪个轴为准取数据 取值 （axis模式下有类目xy轴）'x','y';（item模式下）'radius','angle' snap: 坐标轴指示器是否自动吸附到点上。默认自动判断。true animation: 是否开启动画 默认true animationThreshold: 是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画 animationDuration: 初始动画的时长，支持回调函数 animationEasing: 初始动画的缓动效果。取值如'linear','backln','quarticln'.... animationDelay: 初始动画的延迟，支持回调函数， animationDurationUpdate:数据更新动画的时长 animationEasingUpdate: 数据更新动画的缓动效果。 animationDelayUpdate: 数据更新动画的延迟，支持回调函数， //坐标轴指示器的文本label样式标签配置 tooltip.axisPointer.label:{} 坐标轴指示器的文本标签 show: 是否显示文本标签,就是类目轴（这里是x轴）是否有个文本显示，如果type设置为'cross'默认选中，否则false precision: 文本标签中数值的小数点精度。默认根据当前轴的值自动判断。 formatter: 文本标签文字的格式化器 具体参考官方文档 margin: label距离轴的距离 如50 代表离50px color: label文字颜色 fontStyle: 字体风格 'normal'，'italic'，'oblique' fontWeight: 字体粗细 'normal'，'bold'，'bolder'，'lighter' / 100 | 200 | 300 | 400... fontFamily: 字体样式 fontSize: 字体大小 lineHeight: label行高 width,height: 文本显示宽高 textBorderColor: 文字本身的描边颜色 textBorderWidth: 文字本身的描边宽度 textShadowColor: 文字本身的阴影颜色 textShadowBlur: 文字本身的阴影长度 textShadowOffsetX: 文字本身的阴影 X 偏移 textShadowOffsetY: 文字本身的阴影 Y 偏移 overflow: 文字超出宽度是否截断或者换行,前提得配置width lineOverflow: 文本超出高度部分是否截断，配置height时有效 padding: axisPointer内边距也可以看作label内边距 可数值或数组 backgroundColor:label文本标签的颜色 borderColor: label边框颜色 borderWidth: label边框宽度 shadowBlur: 图形阴影的模糊大小 shadowColor: 阴影颜色 shadowOffsetX: 阴影水平方向上的偏移距离 shadowOffsetY: 阴影垂直方向上的偏移距离 //设置指示线样式 tooltip.axisPointer.lineStyle:{} axisPointer.type 为 'line' 时有效 tooltip.axisPointer.crossStyle:{} axisPointer.type 为 'cross' 时有效 注：lineStyle和crossStyle对象里面属性一样 color: 颜色 width: 线宽 type: 线类型 'solid'实线，'dashed'虚线，'dotted'点线 shadowBlur: 线阴影的模糊大小 shadowColor: 阴影颜色 shadowOffsetX: 阴影水平方向上的偏移距离 shadowOffsetY: 阴影垂直方向上的偏移距离 opacity: 图形透明度 0~1 tooltip.axisPointer.shadowStyle:{} axisPointer.type 为 'shadow' 时有效 color: 颜色 shadowBlur: 线阴影的模糊大小 shadowColor: 阴影颜色 shadowOffsetX: 阴影水平方向上的偏移距离 shadowOffsetY: 阴影垂直方向上的偏移距离
基本案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; border: 1px dashed #f69"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据（重要的全在这里面）
let option = {
//图例组件。
legend: {show: true, data: ["语文", "数学", "英语"]},
//提示框组件
tooltip: {
show: true, //显示提示框默认true
trigger: 'axis', //触发提示框显示类型 当前是柱状图就用axis
position: [0, 0],//提示框浮层的位置
formatter: '{b}<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>',//格式数据
//设置悬浮框文字样式
textStyle: {
color: '#c93623',
fontWeight: 800,
},
backgroundColor: 'rgba(255,255,255,.5)', //设置悬浮框背景
borderColor: '#ecdf95',
//坐标轴指数配置器
axisPointer: {
type: 'cross', //指示线类型十字准星
//指示器label文本样式
label: {
show: true, //显示label默认true
color: '#f69', //label文字颜色
fontWeight: 800, //label文字粗细
backgroundColor: '#18cba9'//label背景
},
//指示器类轴
lineStyle: {
color: 'red', //类轴线颜色
width: 2, //类轴线宽
type: 'solid', //类轴线类型
opacity: .3, //透明的
},
//指示器数据轴
crossStyle: {
color: 'red', //数据轴线颜色
width: 2, //数据轴线宽
type: 'solid', //数据轴线类型
opacity: .3, //透明的
}
}
},
//直角坐标系 中的 x 轴,
xAxis: {
show: true,
type: 'category',
data: ["张三", "李四", "王二", "麻子", "蚂蚁小哥"],
},
//直角坐标系 中的 y 轴,
yAxis: {show: true, type: 'value'},
//系列列表。
series: [
{name: "语文", type: "bar", data: [82.456, 60.457, 45.458, 77.446, 86.426]},
{name: "数学", type: "bar", data: [23.295, 90.285, 85.285, 77.265, 35.265]},
{name: "英语", type: "bar", data: [54.344, 32.344, 45.348, 78.374, 75.384]}],
};
/**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
//把刚才实例好的echarts对象里面设置数据和配置
myChart.setOption(option);
//自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
</body>
</html>
4：toolbox工具栏
说到工具栏那就好用多了内置 导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具，工具栏的按钮是在feature的节点下
工具栏 toolbox:{} //显示模式 show: 是否显示工具栏组件 ==>默认true orient: 工具栏 icon 的布局朝向 'horizontal'水平，'vertical'垂直 itemSize: 工具栏 icon 的大小 left,top,right,bottom: 设置工具栏组件的定位 以大容器为基准， 百分比如'10%' 也可以数字，或'left','center','right','top','middle','bottom','auto' width,height: 工具栏宽高 //⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐ //全局工具图标及文字样式 toolbox.feature.iconStyle:{} 工具小图标样式 前提未设置上面的icon图标 color: 图标颜色 borderColor: 图标边框色 borderWidth: 图标边框宽 borderType: 图标边框类型 'solid', 'dashed', 'dotted' shadowBlur 图形阴影的模糊大小 shadowColor 图标阴影颜色 shadowOffsetX: 图标阴影X偏移 shadowOffsetY: 图标阴影Y偏移 opacity: 透明度 toolbox.feature.emphasis: {} 工具小图标下的小文字样式 toolbox.feature.emphasis.iconStyle {} color: 文字颜色 borderColor: 文字边框色 borderWidth: 文字边框宽度 borderType: 文字边框类型 'solid', 'dashed', 'dotted' shadowBlur: 文字阴影的模糊大小 shadowColor: 文字阴影颜色 shadowOffsetX: 文字阴影X偏移 shadowOffsetY: 文字阴影Y偏移 opacity: 透明度 textPosition: 文本位置 'left' / 'right' / 'top' / 'bottom' textFill: 文本颜色，如果未设定，则依次取图标emphasis时候的填充色、描边色，都没有则为 '#000'。 textAlign: 文本对齐方式 'left' / 'center' / 'right' textBackgroundColor: 文本区域填充色 textBorderRadius: 文本区域圆角大小 textPadding: 文本区域内边距 //⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐ //工具栏工具 toolbox.feature:{} ⭐1⭐toolbox.feature.saveAsImage:{} 保存为图片工具 show: 是否显示该工具 type: 保存的图片格式默认png 或者设置'jpg' name: 保存的文件名称，默认使用 title.text 作为名称 title: 此工具被聚焦时显示的标题 icon: 自定义此工具图标 注意路径 backgroundColor:保存的图片背景色 默认白色 connectedBackgroundColor:图表联动是的背景色 excludeComponents:保存为图片时忽略的组件列表，默认忽略工具栏 pixelRatio: 保存图片的分辨率比例，默认跟容器相同大小,要高分辨率就设置大于1的值 iconStyle:{} 局部设置，和全局的设置里面的属性一样 工具小图标样式 emphasis:{} 局部设置，和全局的设置里面的属性一样 工具小图标下的小文字样式 ⭐2⭐toolbox.feature.restore:{} 配置项还原工具 show: 是否显示该工具 title: 此工具被聚焦时显示的标题 icon: 工具的图标 iconStyle:{} 局部设置，和全局的设置里面的属性一样 工具小图标样式 emphasis:{} 局部设置，和全局的设置里面的属性一样 工具小图标下的小文字样式 ⭐3⭐toolbox.feature.dataView:{} 数据视图工具,以文本表格的方式展示 show: 是否显示该工具 title: 此工具被聚焦时显示的标题 icon: 工具的图标 readOnly: 是否不可编辑（只读）默认false可以编辑 lang: 数据视图上有三个话术，默认是['数据视图', '关闭', '刷新'] backgroundColor:数据视图浮层背景色(数据视图的header和footer变色) textareaColor: 数据视图浮层文本输入区背景色(显示数据区域) textareaBorderColor:数据视图（显示数据的地方）外边框 textColor: 文本颜色及标题颜色 buttonColor: 按钮背景色 buttonTextColor:按钮文本颜色 iconStyle:{} 局部设置，和全局的设置里面的属性一样 工具小图标样式 emphasis:{} 局部设置，和全局的设置里面的属性一样 工具小图标下的小文字样式 ⭐4⭐toolbox.feature.dataZoom:{} 数据区域缩放。目前只支持直角坐标系的缩放 show: 是否显示该工具 title:{} 因为缩放和还原是2个小组件，则有两个名称 设置title属性如下 zoom：缩放名称默认'区域缩放'，back：还原名称默认'区域缩放还原' icon:{} 和title一样，因为2个小组件，要设置图标有2个属性 zoom：缩放图标 back:还原图标 iconStyle:{} 局部设置，和全局的设置里面的属性一样 工具小图标样式 emphasis:{} 局部设置，和全局的设置里面的属性一样 工具小图标下的小文字样式 xAxisIndex: 指定哪些 xAxis 被控制 yAxisIndex: 指定哪些 yAxis 被控制 toolbox.feature.dataZoom.brushStyle:{} 刷选框样式 color: 选区颜色 borderColor: 选区边框色 borderWidth: 选区边框宽 borderType: 选区边框类型 'solid', 'dashed', 'dotted' shadowBlur 选区阴影的模糊大小 shadowColor 选区阴影颜色 shadowOffsetX: 选区阴影X偏移 shadowOffsetY: 选区阴影Y偏移 opacity: 透明度 ⭐5⭐toolbox.feature.magicType:{} 动态类型切换图表 show: 是否显示该工具 type: 切换图表的类型 Array类型 值范围'line','bar','stack','tiled' 如:['line', 'bar', 'stack', 'tiled'] title: 各个类型的标题文本，可以分别配置分别有四个属性可设置 属性:line,bar,stack,tiled icon: 各个类型的 icon path，可以分别配置 属性:line,bar,stack,tiled iconStyle:{} 局部设置，和全局的设置里面的属性一样 工具小图标样式 emphasis:{} 局部设置，和全局的设置里面的属性一样 工具小图标下的小文字样式 option:{} 各个类型的专有配置项。在切换到某类型的时候会合并相应的配置项 属性:line,bar,stack,tiled seriesIndex: 各个类型对应的系列的列表 属性:line,bar,stack,tiled
toolbox组件基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; border: 1px dashed #f69"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据（重要的全在这里面）
let option = {
//图例组件。
legend: {
show: true,
data: ['语文', '数学', '英语']
},
//提示框组件
tooltip: {
show: true, //显示提示框默认true
},
//绘制网格大小，后面介绍
grid: {
left: '15%',
},
//工具栏组件
toolbox: {
show: true, //显示工具栏 默认true
orient: 'vertical', //垂直排列
left: '0%', //设置位置
top: '0%', //设置位置
//工具栏对象
feature: {
//保存图片工具
saveAsImage: {
type: 'jpg', //生成的图片格式
name: 'dataImg', //图片名称
title: '保存图片' //此工具被聚焦时显示的标题
},
//配置项还原工具
restore: {
title: '重置',
},
//数据视图工具
dataView: {
title: '数据展示',
readOnly: false, //默认false 可修改
lang: ['数据展示', '关闭', '刷新'], //数据视图上有三个话术
//设置一些显示文本数据的样式
backgroundColor: '#0a3989',
textareaColor: '#2e80d9',
textColor: 'rgba(0,0,0,.8)',
buttonColor: 'rgba(255,255,0,.6)',
},
//区域缩放
dataZoom: {
title: {zoom: '缩放', back: '还原'},
//刷选框样式
brushStyle: {
color: 'rgba(255,40,80,.2)',
borderColor: '#f00',
borderWidth: 2,
borderType: 'dashed',
opacity: .5,
}
},
//动态类型切换图表
magicType: {
type: ['line', 'bar', 'stack'],
title: {
line: '折线图',
bar: '柱状图',
stack: '堆叠图'
}
}
},
//设置具体全局样式 图标
iconStyle: {
color: 'rgba(0,0,255,.3)',
},
//设置具体全局样式 字体
emphasis: {
iconStyle: {
color: 'rgba(255,0,0,.6)',
textPadding: 5,
textBackgroundColor: 'rgba(0,0,0,.2)',
textBorderRadius: 5,
opacity: .3
}
}
},
//直角坐标系 中的 x 轴,
xAxis: {
show: true,
type: 'category',
data: ["张三", "李四", "王二", "麻子", "蚂蚁小哥"],
},
//直角坐标系 中的 y 轴,
yAxis: {show: true, type: 'value'},
//系列列表。
series: [
{name: "语文", type: "bar", data: [82, 60, 45, 77, 86]},
{name: "数学", type: "bar", data: [23, 90, 85, 77, 35]},
{name: "英语", type: "bar", data: [54, 32, 45, 78, 75]}],
};
/**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
//把刚才实例好的echarts对象里面设置数据和配置
myChart.setOption(option);
//自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
</body>
</html>
三：直角坐标系常见配置
直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图针对于直角坐标系的图表, 有一些通用的配置，分别为 网格grid、坐标轴 [ xAxis坐标系X轴、yAxis坐标系Y轴 ]、dataZoom区域缩放
1： grid网格
网格绘制 grid:{} //基本属性 show: 是否显示直角坐标系网格,默认false,设置true代表图标四边有个框 left,top,right,bottom: 设置网格组件的定位 以大容器为基准， 百分比如'10%' 也可以数字，或'left','center','right','top','middle','bottom','auto' width,height: 网格组件宽高 containLabel: grid 区域是否包含坐标轴的刻度标签值，默认false,当left:0;就代表看不到y轴的刻度值了 backgroundColor:grid网格背景色，默认透明 borderColor: 网格边框色 borderWidth: 网格边框宽 borderType: 网格边框类型 'solid', 'dashed', 'dotted' shadowBlur 网格阴影的模糊大小 shadowColor 网格阴影颜色 shadowOffsetX: 网格阴影X偏移 shadowOffsetY: 网格阴影Y偏移 grid.tooltip:{} 网格里的提示框组件，详细请参考官方文档或者我上面介绍的tooltip通用配置 提示框组件可以设置在多种地方： 可以设置在全局，即 tooltip 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip 可以设置在系列中，即 series.tooltip 可以设置在系列的每个数据项中，即 series.data.tooltip
基本使用grid网格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; border: 1px dashed #f69"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据（重要的全在这里面）
let option = {
//图例组件。
legend: {
show: true,
data: ['语文', '数学', '英语']
},
//提示框组件
tooltip: {
show: true, //显示提示框默认true
},
//绘制网格大小，后面介绍
grid: {
show: true,
left: '2%',
top: '10%',
bottom: '5%',
right: '2%',
containLabel: true, //显示坐标轴刻度
backgroundColor: '#73e8dc',
borderColor: '#f69',
borderWidth: 2,
borderType: 'dashed',
//一般提示框会在全局上写
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
}
},
//直角坐标系 中的 x 轴,
xAxis: {
show: true,
type: 'category',
data: ["张三", "李四", "王二", "麻子", "蚂蚁小哥"],
},
//直角坐标系 中的 y 轴,
yAxis: {show: true, type: 'value'},
//系列列表。
series: [
{name: "语文", type: "bar", data: [82, 60, 45, 77, 86]},
{name: "数学", type: "bar", data: [23, 90, 85, 77, 35]},
{name: "英语", type: "bar", data: [54, 32, 45, 78, 75]}],
};
/**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
//把刚才实例好的echarts对象里面设置数据和配置
myChart.setOption(option);
//自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
</body>
</html>
2：坐标轴 xAxis / yAxis
xAxis/yAxis主要时针对x轴和y轴，一个grid中最多只能有2种位置x/y轴，如xAxis在单个grid组件中最大只能放上下两个x轴
xAxis / yAxis 配置项介绍 两者差不多 nameTextStyle:{} 坐标轴名称的文字样式 axisLine:{} 坐标轴轴线(x/y)相关设置 axisTick:{} 坐标轴(x/y)刻度相关设置 minorTick:{} 坐标轴(x/y)次刻度线相关设置 注此时轴的type值为'category'才可使用 minorSplitLine:{} 坐标轴(x/y)在grid区域中的次分隔线 注此时轴的type值为'category'才可使用 axisLabel:{} 坐标轴(x/y)刻度标签的相关设置 splitLine:{} 坐标轴(x/y)在grid区域中的分隔线 splitArea:{} 坐标轴(x/y)在grid区域中的分隔区域，默认不显示 data:[{}] 类目数据，在类目轴（type: 'category'）中有效 axisPointer:{} 坐标轴指示器配置项
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴， 多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴， 多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。 xAxis:{} / yAxis:{} show: 是否显示x轴 默认显示 type: 坐标轴类型 'value'数值轴,适用于连续数据 'category'类目轴,适用于离散的类目数据 'time'时间轴,适用于连续的时序数据 'log' 对数轴,适用于对数数据 name: 类目轴名称 String nameLocation: 坐标轴名称显示位置 'start','middle'或'center','end' gridIndex: x轴所在的 grid 的索引，默认位于第一个 grid position: x轴的位置 默认在'bottom'，还可以设置'top' 默认grid中的第一个x轴在grid的下方（'bottom'），第二个 x 轴视第一个x轴的位置放在另一侧 offset: X轴相对于默认位置的偏移 在相同的 position 上有多个 X 轴的时候有用 realtimeSort: 用于制作动态排序柱状图 sortSeriesIndex:动态排序柱状图用于排序的系列id nameGap: 坐标轴名称与轴线之间的距离 nameRotate: 坐标轴名字旋转，角度值 inverse: 是否是反向坐标轴 默认false boundaryGap: 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 设置true时每列图表在刻度值中间，false时在刻度点在每列图表中间 min,max: 坐标轴刻度最小/大值 假设设置最大4，最小2，那么就会显示数组第2，4的类目 scale: 是否是脱离 0 值比例,在type:'value'有效 在设置min和max之后该配置项无效 splitNumber: 坐标轴的分割段数 在类目轴中无效 minInterval: 自动计算的坐标轴最小间隔大小 maxInterval: 自动计算的坐标轴最大间隔大小 interval: 强制设置坐标轴分割间隔 logBase: 对数轴的底数，只在对数轴中（type: 'log'）有效 silent: 坐标轴是否是静态无法交互 triggerEvent: 坐标轴的标签是否响应和触发鼠标事件，默认不响应 //⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐ //坐标轴轴线相关设置 ⭐1⭐xAxis.axisLine:{} show: 是否显示坐标轴轴线 onZero: X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效 onZeroAxisIndex:当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上 symbol: 轴线两边的箭头 symbolSize: 轴线两边的箭头的大小， symbolOffset: 轴线两边的箭头的偏移， xAxis.axisLine.lineStyle:{} //坐标轴刻度线样式 color: 刻度线颜色 width: 刻度线宽度 type: 刻度线类型 'solid', 'dashed', 'dotted' shadowBlur 刻度线阴影的模糊大小 shadowColor 刻度线阴影颜色 shadowOffsetX: 刻度线阴影X偏移 shadowOffsetY: 刻度线阴影Y偏移 opacity: 透明度 //坐标轴刻度相关设置 ⭐2⭐xAxis.axisTick:{} show: 是否显示坐标轴刻度 alignWithLabel: 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。 interval: 坐标轴刻度的显示间隔，在类目轴中有效。 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签， inside: 坐标轴刻度是否朝内，默认朝外 length: 坐标轴刻度的长度 xAxis.axisTick.lineStyle:{} 具体参照上面的lineStyle:{} //坐标轴次刻度线相关设置 次刻度线无法在类目轴（type: 'category'）中使用。 ⭐3⭐xAxis.minorTick:{} show: 是否显示次刻度线。 splitNumber:次刻度线分割数，默认会分割成 5 段 length: 次刻度线的长度 xAxis.minorTick.lineStyle:{} 具体参照上面的lineStyle:{} //坐标轴刻度标签的相关设置 ⭐4⭐xAxis.axisLabel:{} show: 是否显示刻度标签 interval: 坐标轴刻度标签的显示间隔，在类目轴中有效 inside: 刻度标签是否朝内，默认朝外false rotate: 刻度标签旋转的角度，在类目轴的类目标签防止过长重叠 如'-90' margin: 刻度标签与轴线之间的距离 formatter: 刻度标签的内容格式器，支持字符串模板和回调函数两种形式 showMinLabel:是否显示最小tick的label。可取值 true, false, null showMaxLabel:是否显示最大tick的label。可取值 true, false, null color: 刻度标签文字的颜色， fontStyle: 文字字体的风格 'normal','italic','oblique' fontWeight: 文字字体的粗细 'normal'，'bold'，'bolder'，'lighter' / 100 | 200 | 300 | 400... fontFamily: 字体样式 fontSize: 字体大小 align: 文字水平对齐方式 'left','center','right' verticalalign: 文字垂直对齐方式 'top','middle','bottom' lineHeight: label行高 width,height: 文本显示宽高 textBorderColor: 文字本身的描边颜色 textBorderWidth: 文字本身的描边宽度 textShadowColor: 文字本身的阴影颜色 textShadowBlur: 文字本身的阴影长度 textShadowOffsetX: 文字本身的阴影 X 偏移 textShadowOffsetY: 文字本身的阴影 Y 偏移 overflow: 文字超出宽度是否截断或者换行,前提得配置width ellipsis: 在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本 lineOverflow: 文本超出高度部分是否截断，配置height时有效 padding: axisPointer内边距也可以看作label内边距 可数值或数组 backgroundColor:label文本标签的颜色 borderColor: label边框颜色 borderWidth: label边框宽度 borderRadius: 文字块的圆角 shadowBlur: 图形阴影的模糊大小 shadowColor: 阴影颜色 shadowOffsetX: 阴影水平方向上的偏移距离 shadowOffsetY: 阴影垂直方向上的偏移距离 //坐标轴在 grid 区域中的分隔线 ⭐5⭐xAxis.splitLine:{} show: 是否显示分隔线。默认数值轴显示，类目轴不显示 interval:坐标轴分隔线的显示间隔，在类目轴中有效 xAxis.splitLine.lineStyle:{} 具体参照上面的lineStyle:{} //坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线 minorTick ⭐6⭐xAxis.minorSplitLine:{} show: 是否显示次分隔线。默认不显示 xAxis.minorSplitLine.lineStyle:{} 具体参照上面的lineStyle:{} //坐标轴在 grid 区域中的分隔区域，默认不显示 ⭐7⭐xAxis.splitArea:{} show: 是否显示分隔区域 interval: 坐标轴在 grid 区域中的分隔区域，默认不显示 areaStyle:{} 分隔区域的样式设置 color: 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色 传入多个颜色Array shadowBlur: 图形阴影的模糊大小 shadowColor: 阴影颜色 shadowOffsetX: 阴影水平方向上的偏移距离 shadowOffsetY: 阴影垂直方向上的偏移距离 opacity: 透明度 //类目数据，在类目轴（type: 'category'）中有效。 ⭐8⭐xAxis.data:[{}] value: 单个类目名称 data.textStyle:{} 类目标签的文字样式,设置各种样式 //坐标轴指示器配置项 ⭐9⭐xAxis.axisPointer:{} 具体参照tooltip:{}提示框组件里的axisPointer
使用xAxis及yAxis完成基本案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; background:#100C2A"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据（重要的全在这里面）
let option = {
//图例组件。
legend: {
show: true,
data: ['语文', '数学', '英语']
},
//提示框组件
tooltip: {
show: true, //显示提示框默认true
},
//绘制网格大小
grid: {
show: true,
left: '3%',
top: '15%',
right: '5%',
bottom: '6%',
containLabel: true,
borderColor: 'rgba(255,255,255,.1)'
},
//直角坐标系 中的 x 轴,
xAxis: {
show: true,
type: 'category', //坐标轴类型
data: ["张三", "李四", "王二", "麻子", "王杰", "张伟", '徐浩', '刘伟', '杨兰'],
name: '类别', //类目轴名称
nameGap: 5, //坐标轴名称与轴线之间的距离
nameRotate: '35', //坐标轴名字旋转，角度值
//类目轴名称样式
nameTextStyle: {
color: 'rgba(255,255,255,.6)',
fontWeight: 100,
},
boundaryGap: true, //坐标轴两边留白策略，两边有空隙 默认
//坐标轴轴线相关设置
axisLine: {
show: true,
symbol: ['none', 'arrow'],//轴线两边的箭头 起点没有终点有
symbolSize: 5, //轴线箭头大小
},
//坐标轴刻度相关设置
axisTick: {
show: true,
length: 5, //刻度长短
//刻度样式设置
lineStyle: {
color: '#f00',
width: 2,
type: 'dotted',
}
},
//坐标轴刻度标签的相关设置
axisLabel: {
show: true,
color: 'rgba(255,255,255,.6)',
fontWeight: 100,
rotate: '-45',
borderColor: 'rgba(255,0,0,.2)',
borderWidth: 1,
padding: 3,
borderRadius: 4,
backgroundColor: 'rgba(0,0,0,.4)'
},
//坐标轴在 grid 区域中的分隔线
splitLine: {
show: true,
// interval:2,
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
//坐标轴在 grid 区域中的分隔区域，默认不显示
splitArea: {
show: true,
areaStyle: {
color: ['#1a29af', '#4fd93f'],
opacity: .1
}
},
},
//直角坐标系 中的 y 轴,
yAxis: {
show: true,
type: 'value',
name: '分数',
nameRotate: '-45',
nameTextStyle: {
color: 'rgba(255,255,255,.6)',
fontWeight: 100,
},
splitNumber: 3,
scale: true,
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolSize: 5,
},
//坐标轴次刻度线相关设置 次刻度线无法在类目轴（type: 'category'）中使用。
minorTick: {
show: true,
splitNumber: 2,
length: 5,
lineStyle: {
color: 'rgba(255,0,0,.8)',
width: 2,
type: 'dotted'
}
},
//坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线 minorTick
minorSplitLine: {
show: true,
lineStyle: {
color: 'rgba(0,255,0,.2)'
}
},
axisLabel: {
show: true,
color: 'rgba(255,255,255,.6)',
fontWeight: 100,
rotate: '-45',
borderColor: 'rgba(255,0,0,.2)',
borderWidth: 1,
padding: 3,
borderRadius: 4,
backgroundColor: 'rgba(0,0,0,.4)'
},
splitLine: {
lineStyle: {
color: 'rgba(0,255,0,.8)'
}
}
},
//系列列表
series: [
{name: "语文", type: "bar", data: [82, 60, 45, 77, 86, 58, 96, 54, 85]},
{name: "数学", type: "bar", data: [40, 90, 85, 78, 35, 60, 85, 78, 66]},
{name: "英语", type: "bar", data: [66, 85, 72, 89, 77, 42, 25, 60, 88]},
],
};
/**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
//把刚才实例好的echarts对象里面设置数据和配置
myChart.setOption(option);
//自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
</body>
</html>
3：dataZoom区域缩放
dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着可以配置多个区域缩放器
区域缩放 dataZoom:[{}] 此组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响 ⭐⭐dataZoom-slider:滑动条型数据区域缩放组件（dataZoomInside）外部 show: 是否显示组件 默认true type: 外部缩放组件类型 'slider' backgroundColor: 组件的背景颜色 borderColor: 边框颜色 fillerColor: 选中范围的填充颜色,注意给个透明度 //数据阴影和选中数据阴影样式设置 dataBackground:{} 数据阴影的样式 lineStyle:{} 阴影的线条样式 areaStyle:{} 阴影的填充样式 selectedDataBackground: 选中部分数据阴影的样式 lineStyle:{} 选中部分阴影的线条样式 areaStyle:{} 选中部分阴影的填充样式 //移动手柄和两侧手柄设置样式 handleIcon: 两侧缩放手柄的 icon 形状，支持路径字符串 'circle','rect','roundRect','triangle','diamond','pin','arrow','none','image://图标地址' handleSize: 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比 handleStyle:{} 两侧缩放手柄的样式配置 moveHandleIcon: 移动手柄中间的 icon，支持路径字符串，和handleIcon传的参数一样的范围 moveHandleSize 移动手柄的尺寸高度 moveHandleStyle:{} 移动手柄的样式配置 //-------- labelPrecision: 显示label的小数精度。默认根据数据自动决定 labelFormatter: 显示的label的格式化器 showDetail: 是否显示detail，即拖拽时候显示详细数值信息(2边显示当前拖拽的范围) showDataShadow: 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势true、false textStyle:{} dataZoom 文字的颜色,前提showDetail为true两边显示拖拽的范围数据 realtime: 拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新 xAxisIndex: 重要 dataZoom-slider 组件控制的 x轴 正常设置0 具体参考官方文档 yAxisIndex: 重要 设置 dataZoom-slider 组件控制的 y轴 正常设置0 具体参考官方文档 filterMode: 重要 数据过滤模式 取值有'filter'，'weakFilter'，'empty'，'none' start,end 数据窗口范围的起始/结束百分比。范围是：0 ~ 100。表示 0% ~ 100% startValue,endValue: 数据窗口范围的起始/结束数值。如果设置了 dataZoom-slider.start 则 startValue 失效 maxSpan,minSpan: 用于限制窗口大小的最小值（百分比值），取值范围是 0 ~ 100 maxValueSpan,minValueSpan: 用于限制窗口大小的最小值（实际数值） orient: 布局方式是横还是竖'horizontal'：水平,'vertical'：竖直 zoomLock: 是否锁定选择区域（或叫做数据窗口）的大小,设置true锁定选择区域的大小，只能平移，不能缩放 throttle: 设置触发视图刷新的频率。单位为毫秒（ms）就相当一个延迟效果 left,top,right,bottom: 缩放组件位置设置，定位到某个地方 brushSelect: 是否开启刷选功能。你可以按住鼠标左键后框选出选中部分 brushStyle:{} 刷选框样式设置 emphasis:{} 高亮样式设置,高亮左右手柄和顶部手柄 handleStyle:{} 左右手柄高亮 moveHandleStyle:{} 上手柄高亮 ⭐⭐dataZoom-inside 内置型数据区域缩放组件（dataZoomInside）内部 type: 内部缩放组件类型 'inside' disabled: 是否停止组件的功能,和show差不多 xAxisIndex: 重要 dataZoom-slider 组件控制的 x轴 正常设置0 具体参考官方文档 yAxisIndex: 重要 设置 dataZoom-slider 组件控制的 y轴 正常设置0 具体参考官方文档 filterMode: 重要 数据过滤模式 取值有'filter'，'weakFilter'，'empty'，'none' start,end 数据窗口范围的起始/结束百分比。范围是：0 ~ 100。表示 0% ~ 100% startValue,endValue: 数据窗口范围的起始/结束数值。如果设置了 dataZoom-slider.start 则 startValue 失效 maxSpan,minSpan: 用于限制窗口大小的最小值（百分比值），取值范围是 0 ~ 100 maxValueSpan,minValueSpan: 用于限制窗口大小的最小值（实际数值） orient: 布局方式是横还是竖'horizontal'：水平,'vertical'：竖直 zoomLock: 是否锁定选择区域（或叫做数据窗口）的大小,设置true锁定选择区域的大小，只能平移，不能缩放 throttle: 设置触发视图刷新的频率。单位为毫秒（ms）就相当一个延迟效果 zoomOnMouseWheel: 如何触发缩放 true：表示不按任何功能键，鼠标滚轮能触发缩放 false：表示鼠标滚轮不能触发缩放 'shift'：表示按住 shift 和鼠标滚轮能触发缩放 'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放 'alt'：表示按住 alt 和鼠标滚轮能触发缩放 moveOnMouseMove: 如何触发数据窗口平移 true：表示不按任何功能键，鼠标移动能触发数据窗口平移。 false：表示鼠标移动不能触发平移。 'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。 'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。 'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。 moveOnMouseWheel: 如何触发数据窗口平移 true：表示不按任何功能键，鼠标滚轮能触发数据窗口平移。 false：表示鼠标滚轮不能触发平移。 'shift'：表示按住 shift 和鼠标滚轮能触发数据窗口平移。 'ctrl'：表示按住 ctrl 和鼠标滚轮能触发数据窗口平移。 'alt'：表示按住 alt 和鼠标滚轮能触发数据窗口平移 preventDefaultMouseMove: 是否阻止 mousemove 事件的默认行为
简单使用dataZoom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; background:#100C2A"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据（重要的全在这里面）
let option = {
//图例组件。
legend: {
show: true,
data: ['语文', '数学', '英语']
},
//提示框组件
tooltip: {
show: true, //显示提示框默认true
},
//绘制网格大小
grid: {
show: true,
left: '3%',
top: '15%',
right: '10%',
bottom: '20%',
containLabel: true,
},
//数据缩放组件 对象数组
dataZoom: [
//x轴上的缩放 xAxisIndex
{
show: true, //是否显示默认
type: 'slider', //外部缩放组件类型
backgroundColor: 'rgba(8,78,104,.6)', //组件的背景色
borderColor: 'rgba(255,0,0,.3)', //组件边框颜色
//设置数据部分的颜色样式
dataBackground: {
//阴影的线条样式
lineStyle: {
color: 'rgba(255,255,0,.6)',
width: 2,
type: 'dotted',
},
//阴影的填充样式
areaStyle: {
color: 'rgba(255,0,0,.9)',
}
},
//选中部分数据阴影的样式
selectedDataBackground: {
lineStyle: {
color: '#ff0',
width: 2,
type: 'dotted',
},
areaStyle: {
color: 'rgba(255,0,0,.9)',
opacity: .8
}
},
textStyle: {
color: '#fff',
},
handleIcon: 'roundRect', //两侧缩放手柄的 icon 形状
handleSize: 10, //两侧缩放手柄的 icon 大小
xAxisIndex: 0, //dataZoom-slider 组件控制的 x轴
filterMode: 'empty', //数据过滤
//设置起始位和结束位
startValue: 10,
endValue: 30,
minValueSpan: 10, //设置最小缩放
//刷选框样式
brushStyle: {
color: '#ff0',
},
//高亮样式设置,高亮左右手柄和顶部手柄
emphasis: {
//左右把柄
handleStyle: {
color: '#f00'
},
//上把柄样式
moveHandleStyle: {
color: '#ff0'
}
}
},
//y轴上的缩放 yAxisIndex
{
show: true, //是否显示默认
type: 'slider', //外部缩放组件类型
textStyle: {
color: '#fff',
},
yAxisIndex: 0, //dataZoom-slider 组件控制的 y轴
orient: 'vertical',
filterMode: 'none', //数据过滤
//设置起始位和结束位
startValue: 300,
endValue: 400,
minValueSpan: 10, //设置最小缩放
//位置设置
right: 30,
//刷选框样式
brushStyle: {
color: '#ff0',
},
//高亮样式设置,高亮左右手柄和顶部手柄
emphasis: {
//左右把柄
handleStyle: {
color: '#f00'
},
//上把柄样式
moveHandleStyle: {
color: '#ff0'
}
}
},
//设置内部缩放
{
type: 'inside', //内部缩放组件类型
disabled: false, //默认
xAxisIndex: 0,
}
],
//直角坐标系 中的 x 轴,
xAxis: [
{
show: true,
type: 'category', //坐标轴类型
data: [1, 2, 3, 4, 5, 6, 7, 8, 9.9958, 10, 11, 12, 13, 14, 15, 16,
17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50],
}
],
//直角坐标系 中的 y 轴,
yAxis: {
show: true,
type: 'value',
},
//系列列表
series: {
name: "测试",
type: "bar",
data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188,
194, 159, 159, 169, 244, 199, 163, 149, 80, 67, 162, 140, 143,
125, 76, 119, 70, 104, 109, 159, 124, 135, 150, 164, 169, 83,
155, 75, 59, 78, 136, 103, 104, 176, 89, 155, 140]
},
};
/**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
//把刚才实例好的echarts对象里面设置数据和配置
myChart.setOption(option);
//自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
</body>
</html>
四：柱状图使用 相关属性
在完成了上面一些基本的属性学习后我们就可以正式步入新的旅程了，开始来学习各种图形的图表，上面那些只是基础，还是就是，平常使用不必要都手一个一个的敲，我们只要把一些模板加以改造就行，如果专门搞这些的设置各种样式的图表就参考官网详细学习，这只是入门
series之柱状图常用属性介绍 type:'bar' 设置位柱状图 name: 系列名称，用于tooltip的显示 showBackground: 是否显示柱条的背景色 backgroundStyle:{} 每一个柱条的背景样式，前提showBackground为true labelLine:{} 标签的视觉引导线配置设置内部的length2看到效果 label:{} 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等 itemStyle:{} 每个柱状图的图形样式 emphasis:{} 高亮的图形样式和标签样式 blur:{} 淡出时的图形样式和标签样式。开启 emphasis.focus 后有效。 selectedMode: 选中模式的配置，表示是否支持多个选中，默认关闭'single'，'multiple' select:{} 数据选中时的图形样式和标签样式。开启 selectedMode 后有效。
入门案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; background:#100C2A"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据（重要的全在这里面）
let option = {
color: "#2f89cf",
grid: {
top: "10%",
left: "3%",
right: "3%",
bottom: "4%",
containLabel: true,
},
xAxis: {
type: "category",
data: [
"旅游行业",
"教育培训",
"游戏行业",
"医疗行业",
"电商行业",
"社交行业",
"金融行业",
],
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: 12,
},
axisLine: {
show: true,
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
},
},
yAxis: {
type: "value",
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
width: 1,
color: "rgba(255,255,255,.1)",
},
},
splitLine: {
lineStyle: {
width: 1,
color: "rgba(255,255,255,.1)",
},
},
},
series: [
{
data: [200, 300, 300, 900, 1500, 1200, 600],
type: "bar",
barWidth: "35%",
itemStyle: {
borderRadius: [10, 10, 0, 0],
},
},
],
};
/**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
//把刚才实例好的echarts对象里面设置数据和配置
myChart.setOption(option);
//自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
</body>
</html>
基本代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; background:#100C2A"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
//定义颜色
let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据（重要的全在这里面）
let option = {
tooltip: {
show: false,
trigger: "none"
},
grid: {
top: "10%",
left: "22%",
bottom: "10%",
containLabel: false,
},
xAxis: {
show: false, //不显示x轴
},
yAxis: [
{
type: "category",
show: true,
inverse: true, //反向坐标轴 此时的y轴反转倒过来
//坐标轴轴线相关设置
axisLine: {
show: false,
},
//坐标轴刻度相关设置
axisTick: {
show: false,
},
//刻度标签设置
axisLabel: {
show: true,
color: "#fff",
fontSize: 12,
},
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
},
{
type: "category",
show: true,
//坐标轴轴线相关设置
axisLine: {
show: false,
},
//坐标轴刻度相关设置
axisTick: {
show: false,
},
axisPointer: {
show: false,
type: "none",
},
//刻度标签设置
axisLabel: {
show: true,
color: "#fff",
fontSize: 12,
},
data: [702, 350, 610, 793, 664],
},
],
series: [
{
type: "bar",
data: [70, 34, 60, 78, 69],
//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
label: {
show: true,
position: "inside",
formatter: "{c}%",
color: "#fff",
},
//图形样式
itemStyle: {
color: (params) => myColor[params.dataIndex],
borderRadius: 20,
},
barCategoryGap: '50%',
barWidth: 10,
yAxisIndex: 0,
},
{
type: "bar",
data: [100, 100, 100, 100, 100],
barCategoryGap: '50%',
barWidth: 15,
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15,
},
yAxisIndex: 1,
},
],
};
/**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
//把刚才实例好的echarts对象里面设置数据和配置
myChart.setOption(option);
//自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
</body>
</html>
五：折线图使用 相关属性
具体参考官方文档，使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; background:#100C2A"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据（重要的全在这里面）
let option = {
color: ["#00f2f1", "#ed3f35"],
tooltip: {
trigger: "axis",
},
legend: {
right: "10%",
data: ["新增粉丝", "新增游客"],
textStyle: {
color: "#4c9bfd",
},
},
grid: {
top: "20%",
left: "3%",
right: "4%",
bottom: "3%",
show: true,
borderColor: "#012f4a",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
axisTick: {
show: false,
},
axisLabel: {
color: "#4c9bfd",
},
splitLine: {
show: false,
},
axisPointer: {
show: true,
type: "line",
lineStyle: {
color: "#4c9bfd",
},
},
},
yAxis: {
type: "value",
axisTick: {
show: false,
},
axisLabel: {
color: "#4c9bfd",
},
splitLine: {
lineStyle: {
color: "#012f4a",
},
},
},
series: [
{
name: "新增粉丝",
data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
type: "line",
//设置圆滑
smooth: true,
},
{
name: "新增游客",
data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
type: "line",
smooth: true,
},
],
};
/**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
//把刚才实例好的echarts对象里面设置数据和配置
myChart.setOption(option);
//自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; background:#100C2A"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据（重要的全在这里面）
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
top: "0%",
data: ["播放量", "转发量"],
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: 12,
},
},
grid: {
left: "10",
top: "30",
right: "10",
bottom: "10",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"26",
"28",
"29",
"30",
],
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: 12,
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
},
],
yAxis: [
{
type: "value",
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12,
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
],
series: [
{
name: "播放量",
type: "line",
stack: "总量",
smooth: true,
data: [
30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30,
40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40,
],
//标记的图形
symbol: "circle",
symbolSize: 8,
//每个实例的样式
itemStyle: {
color: "#018444",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12,
},
//是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
showSymbol: false,
areaStyle: {
// 渐变色，只需要复制即可
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
},
},
{
name: "转发量",
type: "line",
stack: "总量",
lineStyle: {
color: "#0184d5",
width: 2,
},
smooth: true,
data: [
130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140,
30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20,
],
symbol: "circle",
symbolSize: 8,
showSymbol: false,
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12,
},
areaStyle: {
// 渐变色，只需要复制即可
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
},
},
],
};
/**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
//把刚才实例好的echarts对象里面设置数据和配置
myChart.setOption(option);
//自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
window.addEventListener("resize", () => {
myChart.resize();
});
</script>
</body>
</html>
⭐结尾
其实官方文档都是特别详细的，在平时我们工作也不用自己手写，比如那些雷达图、地图、饼图、散点图等等在官网都有详细介绍，大家可以平时对照对应的属性进行操作
Echarts社区 大家一定要去看看哟，这可能会导致你以后有什么业务的数据视图都会往里面找案例
作者：蚂蚁小哥
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文链接，否则保留追究法律责任的权利。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）