ECharts学习笔记
数据可视化
数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。
常见的数据可视化库:
-
D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
-
ECharts.js 百度出品的一个开源 Javascript 数据可视化库
-
Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
-
AntV 蚂蚁金服全新一代数据可视化解决方案 等等
-
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
大白话:
官网地址:https://echarts.apache.org/zh/index.html
ECharts入门
ECharts初体验
ECharts入门教程整理来自于B站的UP主。
使用步骤:
1、引入echarts 插件文件到html页面中
选择合适版本进行下载
然后引入
<script src="js/echarts.min.js"></script>
2、准备一个具备大小的DOM容器
基本语法:
<div id="main" style="width: 600px;height:400px;"></div> <!-- 必须要有宽度和高度 -->
示例:
3、初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
4、指定配置项和数据(option)
var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] };
5、将配置项设置给echarts实例对象
myChart.setOption(option);
完整实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数据可视化-ECharts</title> <style type="text/css"> .echarts-box { widows: 400px; height: 400px; background-color: #B3D8FF; } </style> </head> <body> <!-- 1.准备一个带长度和宽度的盒子 --> <div class="echarts-box"></div> <!-- 2.引入echarts.js --> <script src="js/echarts.min.js"></script> <script> /* 3.初始化实例对象,语法:echarts.init(dom容器) */ var myChart = echarts.init(document.querySelector(".echarts-box")); /* 4.指定配置项和数据 */ var option = { title: { text: "ECharts 入门示例" }, tooltip: {}, legend: { data: ["销量"] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20] }] }; /* 把配置项给实例对象 */ myChart.setOption(option); </script> </body> </html>
浏览器查看结果
ECharts常用基础配置
各配置介绍如下:
- title:设置图表的标题
- tooltip:图表的提示框组件。其中trigger表示触发方式。
- legend:图例组件,提示图表中线代表着什么。
- toolbox:工具箱组件,可以另存为图片等功能。
- color:调色盘颜色列表,设置线条的演示,后面跟个数组,设置每条线的颜色。
- grid:网格配置。控制柱状图等图表的大小。 left:图表距离左侧DOM容器的。
- right:距离右侧DOM容器。
- bottom:距离下侧DOM容器。
- containLabel:是否显示刻度标签,如果为true就显示,否则就不显示。
- type:可以是category、value等。可以设置使数据横轴显示或纵轴显示
- stack:数据堆叠,同个类目轴上系列配置相同的
stack值后 后一个系列的值会在前一个系列的值上相加。
参考图:
示例:
option = { // color设置我们线条的颜色 注意后面是个数组 color: ['pink', 'red', 'green', 'skyblue'], // 设置图表的标题 title: { text: '折线图堆叠123' }, // 图表的提示框组件 tooltip: { // 触发方式 trigger: 'axis' }, // 图例组件 legend: { // series里面有了 name值则 legend里面的data可以删掉 }, // 网格配置 grid可以控制线形图 柱状图 图表大小 grid: { left: '3%', right: '4%', bottom: '3%', // 是否显示刻度标签 如果是true 就显示 否则反之 containLabel: true }, // 工具箱组件 可以另存为图片等功能 toolbox: { feature: { saveAsImage: {} } }, // 设置x轴的相关配置 xAxis: { type: 'category', // 是否让我们的线条和坐标轴有缝隙 boundaryGap: false, data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日'] }, // 设置y轴的相关配置 yAxis: { type: 'value' }, // 系列图表配置 它决定着显示那种类型的图表 series: [ { name: '邮件营销', type: 'line', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', data: [320, 332, 301, 334, 390, 330, 320] } ] };
效果:
柱形图
那么如何来做这个柱形图呢?
第一步:查看官网类似案例
-
官网找到类似实例, 适当分析,并且引入到HTML页面中
复制里面的option配置到本地文件
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' } }] };
本地运行
根据需求定制图表
- 设置柱状图的大小
-
改变X轴标签颜色为红色
- 不显示X轴的样式
-
设置y轴的文字标签样式
-
设置y轴的轴线的样式
- y轴分割线的样式
- 修改柱形图的柱子宽度和圆角
- 修改柱状图的工具提示
- 更换对应数据
- 图表随屏幕自适应
完整代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数据可视化-ECharts</title> <style type="text/css"> .echarts-box { width: 400px; height: 400px; background-color: #B3D8FF; } </style> </head> <body> <!-- 1.准备一个带长度和宽度的盒子 --> <div class="echarts-box"></div> <!-- 2.引入echarts.js --> <script src="js/echarts.min.js"></script> <script> /* 3.初始化实例对象,语法:echarts.init(dom容器) */ var myChart = echarts.init(document.querySelector(".echarts-box")); /* 4.指定配置项和数据 */ var option = { // 设置柱状图的颜色 color: ["#2F89CF"], // 设置工具提示 tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器, 坐标轴触发有效 type: "shadow" // 默认为直线,可选为"line"/"shadow" } }, // 设置柱状图的大小 grid: { left: "0%", top: "10px", right: '0%', bottom: "4%", containLabel: true }, // X轴的配置 xAxis: { type: 'category', data: ['小学生', '初中生', '高中生', '大学生', '研究生', '博士生'], axisTick: { alignWithLabel: true }, // 修改刻度标签相关样式 axisLabel: { color: 'red', fontSize: '12' }, // 显示x坐标轴的样式 show: true }, // Y轴的配置 yAxis: { type: 'value', // y轴文字标签的样式 axisLabel: { color: "rgba(255, 255, 255, 0.6)", fontSize: '12' }, // y轴线的样式 axisLine: { lineStyle: { color: "rgba(255, 255, 255, 0.6)", width: 2, } }, // y轴分割线的样式 splitLine: { lineStyle: { color: 'rgba(220, 220, 220, 0.8)', width: 1 } } }, series: [{ data: [100, 90, 80, 50, 20, 5], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, // 修改柱形图中柱子的宽度 barWidth: '20%', itemStyle: { // 修改柱子圆角 barBorderRadius: 20 } }] }; /* 把配置项给实例对象 */ myChart.setOption(option); /* 让图表跟随屏幕自动的去适应 */ window.addEventListener("resize", function() { myChart.resize(); }) </script> </body> </html>
水平柱形图
第一步:查看官网示例
复制option配置
option = { title: { text: '世界人口总量', subtext: '数据来自网络' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['2011年', '2012年'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { type: 'category', data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'] }, series: [ { name: '2011年', type: 'bar', data: [18203, 23489, 29034, 104970, 131744, 630230] }, { name: '2012年', type: 'bar', data: [19325, 23438, 31000, 121594, 134141, 681807] } ] };
引入后,运行
自定义定制
- 修改图表大小
- 不显示x轴相关信息
-
不显示y轴线条和刻度
- 设置刻度标签的文本颜色
-
设置嵌套柱形图
设置成如下图的样式:
首先将第一组柱子设置样式
设置数据显示在柱子里面
不同的柱子设置不同的颜色
设置两组y轴,将yAxis设置为一个数组,数组是两个对象,分别表示两组y轴。
完成嵌套柱形图
完整代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数据可视化-ECharts</title> <style type="text/css"> .echarts-box { width: 400px; height: 400px; background-color: #B3D8FF; } </style> </head> <body> <!-- 1.准备一个带长度和宽度的盒子 --> <div class="echarts-box"></div> <!-- 2.引入echarts.js --> <script src="js/echarts.min.js"></script> <script> var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]; /* 3.初始化实例对象,语法:echarts.init(dom容器) */ var myChart = echarts.init(document.querySelector(".echarts-box")); /* 4.指定配置项和数据 */ var option = { // 修改图表位置 grid: { top: "10%", left: "22%", bottom: "10%", containLabel: true }, title: { text: '世界人口总量', subtext: '数据来自网络' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['2011年', '2012年'] }, // x轴 xAxis: { // 不显示x轴样式 show: false }, // y轴 yAxis: [{ type: 'category', data: ['巴西', '印尼', '美国', '印度', '中国'], // 不显示y轴线条 axisLine: { show: false }, // 不显示刻度 axisTick: { show: false }, // 把刻度标签里面的文字颜色设置为白色 axisLabel: { color: "#fff" } }, { data: [702, 350, 610, 793, 664], // 不显示y轴线条 axisLine: { show: false }, // 不显示刻度 axisTick: { show: false }, // 把刻度标签里面的文字颜色设置为白色 axisLabel: { color: "#fff" } } ], series: [ // 第一组数据(即第一个柱子) { name: '条', type: 'bar', data: [70, 34, 60, 78, 69], yAxisIndex: 0, // 修改第一组柱子的圆角 itemStyle: { barBorderRadius: 20, // 次数的color可以修改柱子的颜色 // params是传进来的柱子对象 color: function(params) { // console.log(params); // dataIndex是当前柱子的索引号 return myColor[params.dataIndex]; } }, // 柱子之间的距离 barCategoryGap: 50, // 柱子的宽度 barWidth: 10, // 显示柱子内的文字 label: { show: true, position: "inside", // {c}会自动解析为数据data里面的数据 formaater: "{c}%" } }, // 第二组数据(即第二个柱子) { name: '框', type: 'bar', data: [100, 100, 100, 100, 100], yAxisIndex: 1, barCategoryGap: 50, barWidth: 15, itemStyle: { color: "none", borderColor: "#00C1DE", borderWidth: 3, barBorderRadius: 15 } } ] }; /* 把配置项给实例对象 */ myChart.setOption(option); /* 让图表跟随屏幕自动的去适应 */ window.addEventListener("resize", function() { myChart.resize(); }) </script> </body> </html>
折线图
第一步:查看官网实例
复制示例代码:
option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [ { name: '邮件营销', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', stack: '总量', data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] };
第二步:自定义定制
-
修改折线图大小
-
修改图例组件中的文字颜色及位置
-
x轴相关配置
- y轴相关配置
-
设置折线光滑
饼形图
第一步:查看官网查找示例
查找合适的示例
复制其配置项
option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] } ] };
第二步:定制图表
-
修改小图标的宽度和高度
-
修改饼图位置
ECharts社区
社区就是一些,活跃的echart使用者,交流和贡献定制好的图表的地方。
配置项整理
以下是基于setOption()函数中的配置项的整理,都参考自官网。
title属性
配置项
title: { id: 1, // 组件ID, 默认不指定 show: true, // 是否显示标题组件, true表示显示, false表示不显示 text: '我是标题', // 主标题文本,支持使用"\n"换行 link: 'http://www.baidu.com', // 主标题文本超链接, 点击主标题跳转超链接 target: 'blank', // 指定窗口打开超链接,可选: 'selft'|'blank'。self表示当前窗口打开; blank表示新窗口打开 textStyle: { // 主标题文字的样式, 是一个对象 color: '#333', // 主标题文字的颜色 fontStyle: 'normal', // 主标题文字字体的风格,可选: 'normal'|'italic'|'oblique'。normal表示正常字体; italic表示斜体; oblique也是斜体 fontWeight: 'lighter', // 主标题文字字体的粗细, 可选: 'noraml'|'bold'|'bolder'|'lighter'|100|200|300|400... fontFamily: 'Arial', // 主标题文字的字体系列, 可选: 'sans-serif'|'serif'|'monospace'|'Courier New'|... fontSize: 20, // 主标题文字的字体大小 lineHeight: 10, // 行高, 注意: rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。 width: '100%', // 文字块的宽度。一般不用指定,不指定则自动是文字的宽度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。width 也可以是百分比字符串,如 '100%'。注意,如果不定义 rich 属性,则不能指定 width 和 height。 height: '100%', // 文字块的高度。一般不用指定,不指定则自动是文字的高度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。注意,如果不定义 rich 属性,则不能指定 width 和 height。 textBorderColor: '#FF0000', // 文字本身的描边颜色 textBorderWidth: 3, // 文字本身的描边宽度 textShadowColor: '#FF00AB', // 文字本身的阴影颜色。 textShadownBlur: 3, // 文字本身的阴影长度。 textShadowOffsetX: -5, // 文字本身的阴影 X 偏移, 即阴影距离文字本身位置的横向偏移量(如果是正数阴影向右偏移多少,如果是负数则表示向左偏移多少) textShadowOffsetY: 5, // 文字本身的阴影 Y 偏移, 即阴影距离文字本身位置的纵向偏移量(如果是正数阴影向下偏移多少,如果是负数则表示向上偏移多少) rich: {}, // 在rich中可以自定义富文本样式, 具体参考: https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE }, subtext: '我是副标题', // 副标题文本,支持使用 \n 换行。 sublink: 'http://www.bilibili.com', // 副标题文本超链接。 subtarget: 'blank', // 指定窗口打开超链接,可选: 'selft'|'blank'。self表示当前窗口打开; blank表示新窗口打开 subtextStyle: { // 副标题文字的样式, 是一个对象 color: '#333', // 副标题文字的颜色 fontStyle: 'normal', // 副标题文字字体的风格,可选: 'normal'|'italic'|'oblique'。normal表示正常字体; italic表示斜体; oblique也是斜体 fontWeight: 'lighter', // 副标题文字字体的粗细, 可选: 'noraml'|'bold'|'bolder'|'lighter'|100|200|300|400... fontFamily: 'Arial', // 副标题文字的字体系列, 可选: 'sans-serif'|'serif'|'monospace'|'Courier New'|... fontSize: 20, // 副标题文字的字体大小 align: 'center', // 注意,这是副标题文字的水平对其方式,默认自动, 可选: 'left'|'center'|'right'。rich 中如果没有设置 align,则会取父层级的 align。 verticalAlign: 'middle', // 副标题文字垂直对齐方式,默认自动。可选: 'top'|'middle'|'bottom'。rich 中如果没有设置 verticalAlign,则会取父层级的 verticalAlign。 lineHeight: 10, // 行高, 注意: rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。 width: '100%', // 文字块的宽度。一般不用指定,不指定则自动是文字的宽度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。width 也可以是百分比字符串,如 '100%'。注意,如果不定义 rich 属性,则不能指定 width 和 height。 height: '100%', // 文字块的高度。一般不用指定,不指定则自动是文字的高度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。注意,如果不定义 rich 属性,则不能指定 width 和 height。 textBorderColor: '#FF0000', // 文字本身的描边颜色 textBorderWidth: 3, // 文字本身的描边宽度 textShadowColor: '#FF00AB', // 文字本身的阴影颜色。 textShadownBlur: 3, // 文字本身的阴影长度。 textShadowOffsetX: -5, // 文字本身的阴影 X 偏移, 即阴影距离文字本身位置的横向偏移量(如果是正数阴影向右偏移多少,如果是负数则表示向左偏移多少) textShadowOffsetY: 5, // 文字本身的阴影 Y 偏移, 即阴影距离文字本身位置的纵向偏移量(如果是正数阴影向下偏移多少,如果是负数则表示向上偏移多少) rich: {}, // 在rich中可以自定义富文本样式, 具体参考: https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE }, textAlign: 'auto', // 标题文字整体(包括 text 和 subtext)的水平对齐。可选值:'auto'|'left'|'right'|'center'。 textVerticalAlign: 'auto', // 整体(包括 text 和 subtext)的垂直对齐。可选值:'auto'|'top'|'bottom'|'middle'。 triggerEvent: false, // 表示是否触发事件, 是一个布尔值 padding: [10, 5, 10, 5], // 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。示例: "padding: 5"设置内边距为5; "padding: [5, 10]"设置上下内边距为5,左右内边距为10; "padding: [5,10,5,10]"设置上右下左的内边距 itemGap: 40, // 主副标题之间的间隔距离 zlevel: 2, // 所有图形的 zlevel 值。zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。 Z: 2, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低,而且不会创建新的 Canvas。 left: '50%', // title 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。 top: '20px', // title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。默认自适应auto。 right: '50%', // title 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。 bottom: '50px', // title 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应auto。 backgroundColor: '#eee', // 标题背景色,默认透明transparent。颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)' ,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc' borderColor: '#00f', //标题的边框颜色。支持的颜色格式同 backgroundColor。 borderWidth: 15, // 标题的边框线宽。 borderRadius: 15, // 圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。示例: "borderRadius:5"统一设置四个角的圆角大小; "borderRadius:[5,5,0,0]"设置左上、右上、右下、左下的圆角大小。 shadowBlur: 15, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。注意:此配置项生效的前提是,设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。 shadowColor: '#e6c', // 阴影颜色。支持的格式同color。注意:此配置项生效的前提是,设置了 show: true。 shadowOffsetX: 15, // 阴影水平方向上的偏移距离。注意:此配置项生效的前提是,设置了 show: true。 shadowOffsetY: 20, // 阴影垂直方向上的偏移距离。注意:此配置项生效的前提是,设置了 show: true。 }
示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数据可视化-ECharts</title> <style type="text/css"> .echarts-box { width: 400px; height: 400px; background-color: #B3D8FF; } </style> </head> <body> <!-- 1.准备一个带长度和宽度的盒子 --> <div class="echarts-box"></div> <!-- 2.引入echarts.js和echarts-wordcloud.js --> <script src="js/echarts.min.js"></script> <script src="js/echarts-wordcloud.min.js"></script> <!-- 3.进行配置 --> <script> /* 3.初始化实例对象,语法:echarts.init(dom容器) */ var myChart = echarts.init(document.querySelector(".echarts-box")); /* 4.指定配置项和数据 */ var option = { /* title:标题组件,包含主标题和副标题 */ title: { id: 1, // 组件ID, 默认不指定 show: true, // 是否显示标题组件, true表示显示, false表示不显示 text: '我是标题', // 主标题文本,支持使用"\n"换行 link: 'http://www.baidu.com', // 主标题文本超链接, 点击主标题跳转超链接 target: 'blank', // 指定窗口打开超链接,可选: 'selft'|'blank'。self表示当前窗口打开; blank表示新窗口打开 textStyle: { // 主标题文字的样式, 是一个对象 color: '#333', // 主标题文字的颜色 fontStyle: 'normal', // 主标题文字字体的风格,可选: 'normal'|'italic'|'oblique'。normal表示正常字体; italic表示斜体; oblique也是斜体 fontWeight: 'lighter', // 主标题文字字体的粗细, 可选: 'noraml'|'bold'|'bolder'|'lighter'|100|200|300|400... fontFamily: 'Arial', // 主标题文字的字体系列, 可选: 'sans-serif'|'serif'|'monospace'|'Courier New'|... fontSize: 20, // 主标题文字的字体大小 lineHeight: 10, // 行高, 注意: rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。 width: '100%', // 文字块的宽度。一般不用指定,不指定则自动是文字的宽度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。width 也可以是百分比字符串,如 '100%'。注意,如果不定义 rich 属性,则不能指定 width 和 height。 height: '100%', // 文字块的高度。一般不用指定,不指定则自动是文字的高度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。注意,如果不定义 rich 属性,则不能指定 width 和 height。 textBorderColor: '#FF0000', // 文字本身的描边颜色 textBorderWidth: 3, // 文字本身的描边宽度 textShadowColor: '#FF00AB', // 文字本身的阴影颜色。 textShadownBlur: 3, // 文字本身的阴影长度。 textShadowOffsetX: -5, // 文字本身的阴影 X 偏移, 即阴影距离文字本身位置的横向偏移量(如果是正数阴影向右偏移多少,如果是负数则表示向左偏移多少) textShadowOffsetY: 5, // 文字本身的阴影 Y 偏移, 即阴影距离文字本身位置的纵向偏移量(如果是正数阴影向下偏移多少,如果是负数则表示向上偏移多少) rich: {}, // 在rich中可以自定义富文本样式, 具体参考: https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE }, subtext: '我是副标题', // 副标题文本,支持使用 \n 换行。 sublink: 'http://www.bilibili.com', // 副标题文本超链接。 subtarget: 'blank', // 指定窗口打开超链接,可选: 'selft'|'blank'。self表示当前窗口打开; blank表示新窗口打开 subtextStyle: { // 副标题文字的样式, 是一个对象 color: '#333', // 副标题文字的颜色 fontStyle: 'normal', // 副标题文字字体的风格,可选: 'normal'|'italic'|'oblique'。normal表示正常字体; italic表示斜体; oblique也是斜体 fontWeight: 'lighter', // 副标题文字字体的粗细, 可选: 'noraml'|'bold'|'bolder'|'lighter'|100|200|300|400... fontFamily: 'Arial', // 副标题文字的字体系列, 可选: 'sans-serif'|'serif'|'monospace'|'Courier New'|... fontSize: 20, // 副标题文字的字体大小 align: 'center', // 注意,这是副标题文字的水平对其方式,默认自动, 可选: 'left'|'center'|'right'。rich 中如果没有设置 align,则会取父层级的 align。 verticalAlign: 'middle', // 副标题文字垂直对齐方式,默认自动。可选: 'top'|'middle'|'bottom'。rich 中如果没有设置 verticalAlign,则会取父层级的 verticalAlign。 lineHeight: 10, // 行高, 注意: rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。 width: '100%', // 文字块的宽度。一般不用指定,不指定则自动是文字的宽度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。width 也可以是百分比字符串,如 '100%'。注意,如果不定义 rich 属性,则不能指定 width 和 height。 height: '100%', // 文字块的高度。一般不用指定,不指定则自动是文字的高度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。注意,如果不定义 rich 属性,则不能指定 width 和 height。 textBorderColor: '#FF0000', // 文字本身的描边颜色 textBorderWidth: 3, // 文字本身的描边宽度 textShadowColor: '#FF00AB', // 文字本身的阴影颜色。 textShadownBlur: 3, // 文字本身的阴影长度。 textShadowOffsetX: -5, // 文字本身的阴影 X 偏移, 即阴影距离文字本身位置的横向偏移量(如果是正数阴影向右偏移多少,如果是负数则表示向左偏移多少) textShadowOffsetY: 5, // 文字本身的阴影 Y 偏移, 即阴影距离文字本身位置的纵向偏移量(如果是正数阴影向下偏移多少,如果是负数则表示向上偏移多少) rich: {}, // 在rich中可以自定义富文本样式, 具体参考: https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE }, textAlign: 'auto', // 标题文字整体(包括 text 和 subtext)的水平对齐。可选值:'auto'|'left'|'right'|'center'。 textVerticalAlign: 'auto', // 整体(包括 text 和 subtext)的垂直对齐。可选值:'auto'|'top'|'bottom'|'middle'。 triggerEvent: false, // 表示是否触发事件, 是一个布尔值 padding: [10, 5, 10, 5], // 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。示例: "padding: 5"设置内边距为5; "padding: [5, 10]"设置上下内边距为5,左右内边距为10; "padding: [5,10,5,10]"设置上右下左的内边距 itemGap: 40, // 主副标题之间的间隔距离 zlevel: 2, // 所有图形的 zlevel 值。zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。 Z: 2, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低,而且不会创建新的 Canvas。 left: '50%', // title 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。 top: '20px', // title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。默认自适应auto。 right: '50%', // title 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。 bottom: '50px', // title 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应auto。 backgroundColor: '#eee', // 标题背景色,默认透明transparent。颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)' ,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc' borderColor: '#00f', //标题的边框颜色。支持的颜色格式同 backgroundColor。 borderWidth: 15, // 标题的边框线宽。 borderRadius: 15, // 圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。示例: "borderRadius:5"统一设置四个角的圆角大小; "borderRadius:[5,5,0,0]"设置左上、右上、右下、左下的圆角大小。 shadowBlur: 15, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。注意:此配置项生效的前提是,设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。 shadowColor: '#e6c', // 阴影颜色。支持的格式同color。注意:此配置项生效的前提是,设置了 show: true。 shadowOffsetX: 15, // 阴影水平方向上的偏移距离。注意:此配置项生效的前提是,设置了 show: true。 shadowOffsetY: 20, // 阴影垂直方向上的偏移距离。注意:此配置项生效的前提是,设置了 show: true。 }} myChart.setOption(option); /* 让图表跟随屏幕自动的去适应 */ window.addEventListener("resize", function() { myChart.resize(); }) </script> </body> </html>
待完......
- echarts学习笔记之图表自适应问题详解
- Echarts学习笔记1--折线图
- ECharts可视化大屏学习笔记【5】(饼图)
- 【web】CodeIgniter框架学习笔记 之 使用ajax连接数据库实现Echarts动态数据可视化
- echarts学习—2(笔记记录API)
- ECharts可视化大屏学习笔记【6】(地图)
- echarts学习—1(笔记)
- ECharts实例开发学习笔记二——时间轴
- ECharts学习笔记
- ECharts实例开发学习笔记二——时间轴
- ECharts可视化大屏学习笔记【2】(ECharts基本使用)
- Echarts 学习笔记--JQuery图表插件
- ECharts 学习笔记(1)-HelloWorld
- [知了堂学习笔记]Echarts的学习与运用
- 学习笔记:ECharts
- Echarts学习笔记1——echarts柱状图分析
- ECharts可视化大屏学习笔记【3】(柱状图)
- ECharts实例开发学习笔记一
- Echarts学习笔记2--从本地文件请求数据制表
- ECharts可视化大屏学习笔记【1】(整个结构布局搭建)