参考博文:
1.ECharts 教程 | 菜鸟教程 (runoob.com)
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。
ECharts 遵循 Apache-2.0 开源协议,免费商用。
ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。
echarts安装 1.独立版本
我们可以在直接下载 echarts.min.js 并用 标签引入。
2.使用CDN方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
3.npm方法
1 npm install echarts --save
echarts配置语法 下面实例可以放在一个html文件里显示效果
1 2 3 4 5 6 7 8 9 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 // 创建html页面 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 第一个 ECharts 实例</title > <script src ="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" > </script > </head > <body > <div id ="main" style ="width: 600px;height:400px;" > </div > <script type ="text/javascript" > var myChart = echarts.init (document .getElementById ('main' )); 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 >
特别说明:
图例组件:
1 2 3 4 5 6 7 8 9 10 11 legend: { data: [{ name: '系列1', // 强制设置图形为圆。 icon: 'circle', // 设置文本为红色 textStyle: { color: 'red' } }] }
系列列表:
1 2 3 4 5 series: [{ name: '销量', // 系列名称 type: 'bar', // 系列图表类型 data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容 }]
每个系列通过 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’ :自定义系列
echarts饼图 饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目。因为不在直角坐标系上,所以也不需要 xAxis,yAxis。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 myChart.setOption({ series : [ { name: '访问来源', type: 'pie', // 设置图表类型为饼图 radius: '55%', // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。 data:[ // 数据数组,name 为数据项名称,value 为数据项值 {value:235, name:'视频广告'}, {value:274, name:'联盟广告'}, {value:310, name:'邮件营销'}, {value:335, name:'直接访问'}, {value:400, name:'搜索引擎'} ] } ] })
完整源码:
1 2 3 4 5 6 7 8 9 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 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 第一个 ECharts 实例</title > <script src ="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" > </script > </head > <body > <div id ="main" style ="width: 600px;height:400px;" > </div > <script type ="text/javascript" > var myChart = echarts.init (document .getElementById ('main' )); myChart.setOption ({ series : [ { name : '访问来源' , type : 'pie' , radius : '55%' , data :[ {value :235 , name :'视频广告' }, {value :274 , name :'联盟广告' }, {value :310 , name :'邮件营销' }, {value :335 , name :'直接访问' }, {value :400 , name :'搜索引擎' } ] itemStyle :{ normal :{ shadowBlur : 200 , shadowColor : 'rgba(0, 0, 0, 0.5)' } } } ] }) </script > </body > </html >
从上面两个来看,接下来我们只会更改变量myChart
的配置,到时候进行替换就行了
样式设置 ECharts 可以通过样式设置来改变图形元素或者文字的颜色、明暗、大小等。
颜色主题 ECharts4 开始,除了默认主题外,内置了两套主题,分别为 light 和 dark 。
1 2 3 4 # light theme var chart = echarts.init(dom, 'light'); # dark theme var chart = echarts.init(dom, 'dark');
另外,我们也可以在官方的 主题编辑器 选择自己喜欢的主题下载。
目前主题下载提供了 JS 版本和 JSON 版本。
如果你使用 JS 版本,可以将 JS 主题代码保存一个 主题名.js 文件,然后在 HTML 中引用该文件,最后在代码中使用该主题。
比如上图中我们选中了一个主题,将 JS 代码保存为 wonderland.js 。
1 2 3 4 5 6 7 <script src ="https://www.runoob.com/static/js/wonderland.js" > </script > ... // HTML 引入 wonderland.js 文件后,在初始化的时候调用 var myChart = echarts.init(dom, 'wonderland'); // ...
如果主题保存为 JSON 文件,那么可以自行加载和注册。
比如上图中我们选中了一个主题,将 JSON 代码保存为 wonderland.json 。
1 2 3 4 5 //主题名称是 wonderland $.getJSON('wonderland.json', function (themeJSON) { echarts.registerTheme('wonderland', themeJSON) var myChart = echarts.init(dom, 'wonderland'); });
注意: 我们使用了 $.getJSON,所以需要引入 jQuery。
调色盘 调色盘可以在 option 中设置。
调色盘给定了一组颜色,图形、系列会自动从其中选择颜色。
可以设置全局的调色盘,也可以设置系列自己专属的调色盘。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 option = { // 全局调色盘。 color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], series: [{ type: 'bar', // 此系列自己的调色盘。 color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'], ... }, { type: 'pie', // 此系列自己的调色盘。 color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'], ... }] }
高亮样式emphasis 直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中,很多地方可以设置 itemStyle 、lineStyle 、areaStyle 、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
1 2 3 4 5 6 7 8 9 10 11 12 // 高亮样式。 emphasis: { itemStyle: { // 高亮时点的颜色 color: 'red' }, label: { show: true, // 高亮时标签的文字 formatter: '高亮时显示的标签内容' } },
异步加载数据 ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行。
1 2 3 4 5 6 7 8 9 10 11 // echarts_test_data.json { "data_pie" : [ {"value":235, "name":"视频广告"}, {"value":274, "name":"联盟广告"}, {"value":310, "name":"邮件营销"}, {"value":335, "name":"直接访问"}, {"value":400, "name":"搜索引擎"} ] }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 实例 var myChart = echarts.init(document.getElementById('main')); myChart.showLoading(); // 开启 loading 效果 $.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) { myChart.hideLoading(); // 隐藏 loading 效果 myChart.setOption({ series : [ { name: '访问来源', type: 'pie', // 设置图表类型为饼图 radius: '55%', // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。 data:data.data_pie } ] }) }, 'json')
数据的动态更新 ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。
所有数据的更新都通过 setOption 实现,你只需要定时获取数据,setOption 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
1 2 3 4 5 6 7 8 9 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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 <!DOCTYPE html > <html > <head > <meta charset ="utf-8" > <title > 第一个 ECharts 实例</title > <script src ="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" > </script > <script src ="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" > </script > </head > <body > <div id ="main" style ="width: 600px;height:400px;" > </div > <script type ="text/javascript" > var base = +new Date (2022 , 10 , 13 ); var oneDay = 24 * 3600 * 1000 ; var date = []; var data = [Math .random () * 150 ]; var now = new Date (base); function addData (shift ) { now = [now.getFullYear (), now.getMonth () + 1 , now.getDate ()].join ('/' ); date.push (now); data.push ((Math .random () - 0.4 ) * 10 + data[data.length - 1 ]); if (shift) { date.shift (); data.shift (); } now = new Date (+new Date (now) + oneDay); } for (var i = 1 ; i < 100 ; i++) { addData (); } option = { xAxis : { type : 'category' , boundaryGap : false , data : date }, yAxis : { boundaryGap : [0 , '50%' ], type : 'value' }, series : [ { name :'成交' , type :'line' , smooth :true , symbol : 'none' , stack : 'a' , areaStyle : { normal : {} }, data : data } ] }; setInterval (function ( ) { addData (true ); myChart.setOption ({ xAxis : { data : date }, series : [{ name :'成交' , data : data }] }); }, 500 ); var myChart = echarts.init (document .getElementById ('main' )); myChart.setOption (option) </script > </body >
数据集 ECharts 使用 dataset 管理数据。
dataset 组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以基于数据指定数据到视觉的映射。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 option = { legend: {}, tooltip: {}, dataset: { // 提供一份数据。 source: [ ['product', '2015', '2016', '2017'], ['Matcha Latte', 43.3, 85.8, 93.7], ['Milk Tea', 83.1, 73.4, 55.1], ['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut Brownie', 72.4, 53.9, 39.1] ] }, // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。 xAxis: {type: 'category'}, // 声明一个 Y 轴,数值轴。 yAxis: {}, // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。 series: [ {type: 'bar'}, {type: 'bar'}, {type: 'bar'} ] }
或者使用对象数组的格式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 option = { legend: {}, tooltip: {}, dataset: { // 这里指定了维度名的顺序,从而可以利用默认的维度到坐标轴的映射。 // 如果不指定 dimensions,也可以通过指定 series.encode 完成映射,参见后文。 dimensions: ['product', '2015', '2016', '2017'], source: [ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7}, {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1}, {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5}, {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1} ] }, xAxis: {type: 'category'}, yAxis: {}, series: [ {type: 'bar'}, {type: 'bar'}, {type: 'bar'} ] };
数据到图形的映射 我们可以在配置项中将数据映射到图形中。
我们可以使用 series.seriesLayoutBy 属性来配置 dataset 是列(column)还是行(row)映射为图形系列(series),默认是按照列(column)来映射。
1 2 3 4 5 6 7 8 9 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 option = { legend: {}, tooltip: {}, dataset: { source: [ ['product', '2012', '2013', '2014', '2015'], ['Matcha Latte', 41.1, 30.4, 65.1, 53.3], ['Milk Tea', 86.5, 92.1, 85.7, 83.1], ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4] ] }, xAxis: [ {type: 'category', gridIndex: 0}, {type: 'category', gridIndex: 1} ], yAxis: [ {gridIndex: 0}, {gridIndex: 1} ], grid: [ {bottom: '55%'}, {top: '55%'} ], series: [ // 这几个系列会在第一个直角坐标系中,每个系列对应到 dataset 的每一行。 {type: 'bar', seriesLayoutBy: 'row'}, {type: 'bar', seriesLayoutBy: 'row'}, {type: 'bar', seriesLayoutBy: 'row'}, // 这几个系列会在第二个直角坐标系中,每个系列对应到 dataset 的每一列。 {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}, {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}, {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}, {type: 'bar', xAxisIndex: 1, yAxisIndex: 1} ] }
常用图表所描述的数据大部分是”二维表”结构,我们可以使用 series.encode 属性将对应的数据映射到坐标轴(如 X、Y 轴)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 var option = { dataset: { source: [ ['score', 'amount', 'product'], [89.3, 58212, 'Matcha Latte'], [57.1, 78254, 'Milk Tea'], [74.4, 41032, 'Cheese Cocoa'], [50.1, 12755, 'Cheese Brownie'], [89.7, 20145, 'Matcha Cocoa'], [68.1, 79146, 'Tea'], [19.6, 91852, 'Orange Juice'], [10.6, 101852, 'Lemon Juice'], [32.7, 20112, 'Walnut Brownie'] ] }, grid: {containLabel: true}, xAxis: {}, yAxis: {type: 'category'}, series: [ { type: 'bar', encode: { // 将 "amount" 列映射到 X 轴。 x: 'amount', // 将 "product" 列映射到 Y 轴。 y: 'product' } } ] };
encode 声明的基本结构如下,其中冒号左边是坐标系、标签等特定名称,如 ‘x’, ‘y’, ‘tooltip’ 等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。
1 2 3 4 5 6 7 8 9 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 // 在任何坐标系和系列中,都支持: encode: { // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示 tooltip: ['product', 'score'] // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。(有时候名字比较长,这可以避免在 series.name 重复输入这些名字) seriesName: [1, 3], // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处,可以使新老数据用 id 对应起来,从而能够产生合适的数据更新动画。 itemId: 2, // 指定数据项的名称使用 “维度3” 在饼图等图表中有用,可以使这个名字显示在图例(legend)中。 itemName: 3 } // 直角坐标系(grid/cartesian)特有的属性: encode: { // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴: x: [1, 5, 'score'], // 把“维度0”映射到 Y 轴。 y: 0 } // 单轴(singleAxis)特有的属性: encode: { single: 3 } // 极坐标系(polar)特有的属性: encode: { radius: 3, angle: 2 } // 地理坐标系(geo)特有的属性: encode: { lng: 3, lat: 2 } // 对于一些没有坐标系的图表,例如饼图、漏斗图等,可以是: encode: { value: 3 }
视觉通道的映射 我们可以使用 visualMap 组件进行视觉通道的映射。
视觉元素可以是:
symbol: 图元的图形类别。
symbolSize: 图元的大小。
color: 图元的颜色。
colorAlpha: 图元的颜色的透明度。
opacity: 图元以及其附属物(如文字标签)的透明度。
colorLightness: 颜色的明暗度。
colorSaturation: 颜色的饱和度。
colorHue: 颜色的色调。
visualMap 组件可以定义多个,从而可以同时对数据中的多个维度进行视觉映射。
1 2 3 4 5 6 7 8 9 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 var option = { dataset: { source: [ ['score', 'amount', 'product'], [89.3, 58212, 'Matcha Latte'], [57.1, 78254, 'Milk Tea'], [74.4, 41032, 'Cheese Cocoa'], [50.1, 12755, 'Cheese Brownie'], [89.7, 20145, 'Matcha Cocoa'], [68.1, 79146, 'Tea'], [19.6, 91852, 'Orange Juice'], [10.6, 101852, 'Lemon Juice'], [32.7, 20112, 'Walnut Brownie'] ] }, grid: {containLabel: true}, xAxis: {name: 'amount'}, yAxis: {type: 'category'}, visualMap: { orient: 'horizontal', left: 'center', min: 10, max: 100, text: ['High Score', 'Low Score'], // Map the score column to color dimension: 0, inRange: { color: ['#D7DA8B', '#E15457'] } }, series: [ { type: 'bar', encode: { // Map the "amount" column to X axis. x: 'amount', // Map the "product" column to Y axis y: 'product' } } ] };
交互联动 以下实例多个图表共享一个 dataset,并带有联动交互:
1 2 3 4 5 6 7 8 9 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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 setTimeout(function () { option = { legend: {}, tooltip: { trigger: 'axis', showContent: false }, dataset: { source: [ ['product', '2012', '2013', '2014', '2015', '2016', '2017'], ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1], ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5], ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1] ] }, xAxis: {type: 'category'}, yAxis: {gridIndex: 0}, grid: {top: '55%'}, series: [ {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, { type: 'pie', id: 'pie', radius: '30%', center: ['50%', '25%'], label: { formatter: '{b}: {@2012} ({d}%)' }, encode: { itemName: 'product', value: '2012', tooltip: '2012' } } ] }; myChart.on('updateAxisPointer', function (event) { var xAxisInfo = event.axesInfo[0]; if (xAxisInfo) { var dimension = xAxisInfo.value + 1; myChart.setOption({ series: { id: 'pie', label: { formatter: '{b}: {@[' + dimension + ']} ({d}%)' }, encode: { value: dimension, tooltip: dimension } } }); } }); myChart.setOption(option); });
交互组件 ECharts 提供了很多交互组件:例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline。
dataZoom dataZoom 组件可以实现通过鼠标滚轮滚动,放大缩小图表的功能。
默认情况下 dataZoom 控制 x 轴,即对 x 轴进行数据窗口缩放 和数据窗口平移 操作。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 option = { xAxis: { type: 'value' }, yAxis: { type: 'value' }, dataZoom: [ { // 这个dataZoom组件,默认控制x轴。 type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 start: 10, // 左边在 10% 的位置。 end: 60 // 右边在 60% 的位置。 } ], series: [ { type: 'scatter', // 这是个『散点图』 itemStyle: { opacity: 0.8 }, symbolSize: function (val) { return val[2] * 40; }, data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]] } ] }
上面的实例只能拖动 dataZoom 组件来缩小或放大图表。如果想在坐标系内进行拖动,以及用鼠标滚轮(或移动触屏上的两指滑动)进行缩放,那么需要 再再加上一个 inside 型的 dataZoom 组件。
在以上实例基础上我们再增加 type: ‘inside’ 的配置信息
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 option = { ..., dataZoom: [ { // 这个dataZoom组件,默认控制x轴。 type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 start: 10, // 左边在 10% 的位置。 end: 60 // 右边在 60% 的位置。 }, { // 这个dataZoom组件,也控制x轴。 type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件 start: 10, // 左边在 10% 的位置。 end: 60 // 右边在 60% 的位置。 } ], ... }
当然我们可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。
1 2 3 4 5 6 7 8 9 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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 var data1 = []; var data2 = []; var data3 = []; var random = function (max) { return (Math.random() * max).toFixed(3); }; for (var i = 0; i < 500; i++) { data1.push([random(15), random(10), random(1)]); data2.push([random(10), random(10), random(1)]); data3.push([random(15), random(10), random(1)]); } option = { animation: false, legend: { data: ['scatter', 'scatter2', 'scatter3'] }, tooltip: { }, xAxis: { type: 'value', min: 'dataMin', max: 'dataMax', splitLine: { show: true } }, yAxis: { type: 'value', min: 'dataMin', max: 'dataMax', splitLine: { show: true } }, dataZoom: [ { type: 'slider', show: true, xAxisIndex: [0], start: 1, end: 35 }, { type: 'slider', show: true, yAxisIndex: [0], left: '93%', start: 29, end: 36 }, { type: 'inside', xAxisIndex: [0], start: 1, end: 35 }, { type: 'inside', yAxisIndex: [0], start: 29, end: 36 } ], series: [ { name: 'scatter', type: 'scatter', itemStyle: { normal: { opacity: 0.8 } }, symbolSize: function (val) { return val[2] * 40; }, data: data1 }, { name: 'scatter2', type: 'scatter', itemStyle: { normal: { opacity: 0.8 } }, symbolSize: function (val) { return val[2] * 40; }, data: data2 }, { name: 'scatter3', type: 'scatter', itemStyle: { normal: { opacity: 0.8, } }, symbolSize: function (val) { return val[2] * 40; }, data: data3 } ] }
响应式 ECharts 图表显示在用户指定高宽的 DOM 节点(容器)中。
有时候我们希望在 PC 和 移动设备上都能够很好的展示图表的内容,实现响应式的设计,为了解决这个问题,ECharts 完善了组件的定位设置,并且实现了类似 CSS Media Query 的自适应能力。
组件的定位和布局 left/right/top/bottom/width/height 定位方式 这六个量中,每个量都可以是『绝对值』或者『百分比』或者『位置描述』。
绝对值
单位是浏览器像素(px),用 number
形式书写(不写单位)。例如 {left: 23, height: 400}
。
百分比
表示占 DOM 容器高宽的百分之多少,用 string
形式书写。例如 {right: '30%', bottom: '40%'}
。
位置描述
可以设置 left: 'center'
,表示水平居中。
可以设置 top: 'middle'
,表示垂直居中。
这六个量的概念,和 CSS 中六个量的概念类似:
left:距离 DOM 容器左边界的距离。
right:距离 DOM 容器右边界的距离。
top:距离 DOM 容器上边界的距离。
bottom:距离 DOM 容器下边界的距离。
width:宽度。
height:高度。
在横向,left、right、width 三个量中,只需两个量有值即可,因为任两个量可以决定组件的位置和大小,例如 left 和 right 或者 right 和 width 都可以决定组件的位置和大小。 纵向,top、bottom、height 三个量,和横向类同不赘述。
center / radius 定位方式
center
是一个数组,表示 [x, y]
,其中,x
、y
可以是『绝对值』或者『百分比』,含义和前述相同。
radius
是一个数组,表示 [内半径, 外半径]
,其中,内外半径可以是『绝对值』或者『百分比』,含义和前述相同。
在自适应容器大小时,百分比设置是很有用的。
横向(horizontal)和纵向(vertical) ECharts的『外观狭长』型的组件(如 legend、visualMap、dataZoom、timeline等),大多提供了『横向布局』『纵向布局』的选择。例如,在细长的移动端屏幕上,可能适合使用『纵向布局』;在PC宽屏上,可能适合使用『横向布局』。
横纵向布局的设置,一般在『组件』或者『系列』的 orient 或者 layout 配置项上,设置为 ‘horizontal’ 或者 ‘vertical’。
以下实例中我们可以可尝试拖动右下角的圆点,图表会随着屏幕尺寸变化,legend 和 系列会自动改变布局位置和方式。
实例中我们使用了 jQuery 来加载外部数据,使用时我们需要引入 jQuery 库。
1 2 3 4 5 6 7 8 9 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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 $.when( $.getScript('https://www.runoob.com/static/js/timelineGDP.js'), $.getScript('https://www.runoob.com/static/js/draggable.js') ).done(function () { draggable.init( $('div[_echarts_instance_]')[0], myChart, { width: 700, height: 400, throttle: 70 } ); myChart.hideLoading(); option = { baseOption: { title : { text: '南丁格尔玫瑰图', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br /> {b} : {c} ({d}%)" }, legend: { data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'] }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'半径模式', type:'pie', roseType : 'radius', label: { normal: { show: false }, emphasis: { show: true } }, lableLine: { normal: { show: false }, emphasis: { show: true } }, data:[ {value:10, name:'rose1'}, {value:5, name:'rose2'}, {value:15, name:'rose3'}, {value:25, name:'rose4'}, {value:20, name:'rose5'}, {value:35, name:'rose6'}, {value:30, name:'rose7'}, {value:40, name:'rose8'} ] }, { name:'面积模式', type:'pie', roseType : 'area', data:[ {value:10, name:'rose1'}, {value:5, name:'rose2'}, {value:15, name:'rose3'}, {value:25, name:'rose4'}, {value:20, name:'rose5'}, {value:35, name:'rose6'}, {value:30, name:'rose7'}, {value:40, name:'rose8'} ] } ] }, media: [ { option: { legend: { right: 'center', bottom: 0, orient: 'horizontal' }, series: [ { radius: [20, '50%'], center: ['25%', '50%'] }, { radius: [30, '50%'], center: ['75%', '50%'] } ] } }, { query: { minAspectRatio: 1 }, option: { legend: { right: 'center', bottom: 0, orient: 'horizontal' }, series: [ { radius: [20, '50%'], center: ['25%', '50%'] }, { radius: [30, '50%'], center: ['75%', '50%'] } ] } }, { query: { maxAspectRatio: 1 }, option: { legend: { right: 'center', bottom: 0, orient: 'horizontal' }, series: [ { radius: [20, '50%'], center: ['50%', '30%'] }, { radius: [30, '50%'], center: ['50%', '70%'] } ] } }, { query: { maxWidth: 500 }, option: { legend: { right: 10, top: '15%', orient: 'vertical' }, series: [ { radius: [20, '50%'], center: ['50%', '30%'] }, { radius: [30, '50%'], center: ['50%', '75%'] } ] } } ] }; myChart.setOption(option); });
数据的视觉映射 visualMap 组件中可以使用的视觉元素有:
图形类别(symbol)
图形大小(symbolSize)
颜色(color)
透明度(opacity)
颜色透明度(colorAlpha)
颜色明暗度(colorLightness)
颜色饱和度(colorSaturation)
色调(colorHue)
数据和维度 ECharts 中的数据,一般存放于 series.data 中。
不同的图表类型,数据格式有所不一样,但是他们的共同特点就都是数据项(dataItem) 的集合。每个数据项含有 数据值(value) 和其他信息(可选)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。
series.data 最常见的形式 是线性表,即一个普通数组:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 series: { data: [ { // 这里每一个项就是数据项(dataItem) value: 2323, // 这是数据项的数据值(value) itemStyle: {...} }, 1212, // 也可以直接是 dataItem 的 value,这更常见。 2323, // 每个 value 都是『一维』的。 4343, 3434 ] } series: { data: [ { // 这里每一个项就是数据项(dataItem) value: [3434, 129, '圣马力诺'], // 这是数据项的数据值(value) itemStyle: {...} }, [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value,这更常见。 [2323, 3223, '瑙鲁'], // 每个 value 都是『三维』的,每列是一个维度。 [4343, 23, '图瓦卢'] // 假如是『气泡图』,常见第一维度映射到x轴, // 第二维度映射到y轴, // 第三维度映射到气泡半径(symbolSize) ] }
在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到x轴,取第二个维度映射到y轴。如果想要把更多的维度展现出来,可以借助 visualMap 。
visualMap组件 visualMap 组件定义了把数据的指定维度映射到对应的视觉元素上。
visualMap 组件可以定义多个,从而可以同时对数据中的多个维度进行视觉映射。
visualMap 组件可以定义为 分段型(visualMapPiecewise) 或 连续型(visualMapContinuous),通过 type 来区分。例如
1 2 3 4 5 6 7 8 9 10 11 12 13 option = { visualMap: [ { // 第一个 visualMap 组件 type: 'continuous', // 定义为连续型 visualMap ... }, { // 第二个 visualMap 组件 type: 'piecewise', // 定义为分段型 visualMap ... } ], ... };
分段型视觉映射组件,有三种模式:
连续型数据平均分段: 依据 visualMap-piecewise.splitNumber 来自动平均分割成若干块。
连续型数据自定义分段: 依据 visualMap-piecewise.pieces 来定义每块范围。
离散数据根据类别分段: 类别定义在 visualMap-piecewise.categories 中。
映射方式配置 visualMap 中可以指定数据的指定维度映射到对应的视觉元素上。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 option = { visualMap: [ { type: 'piecewise' min: 0, max: 5000, dimension: 3, // series.data 的第四个维度(即 value[3])被映射 seriesIndex: 4, // 对第四个系列进行映射。 inRange: { // 选中范围中的视觉配置 color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表, // 数据最小值映射到'blue'上, // 最大值映射到'red'上, // 其余自动线性计算。 symbolSize: [30, 100] // 定义了图形尺寸的映射范围, // 数据最小值映射到30上, // 最大值映射到100上, // 其余自动线性计算。 }, outOfRange: { // 选中范围外的视觉配置 symbolSize: [30, 100] } }, ... ] };
1 2 3 4 5 6 7 8 9 10 11 12 13 14 option = { visualMap: [ { ..., inRange: { // 选中范围中的视觉配置 colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。 // 本来的颜色可能是从全局色板中选取的颜色,visualMap组件并不关心。 symbolSize: [30, 100] }, ... }, ... ] };
事件处理 ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。
ECharts 通过 on 方法来监听用户的行为,例如监控用户的点击行为。
ECharts 中事件分为两种类型:
用户鼠标操作点击,如 ‘click’、’dblclick’、’mousedown’、’mousemove’、’mouseup’、’mouseover’、’mouseout’、’globalout’、’contextmenu’ 事件。
还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 ‘legendselectchanged’ 事件),数据区域缩放时触发的 ‘datazoom’ 事件等等。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 myChart.on('click', function (params) { // 在用户点击后控制台打印数据的名称 console.log(params); }); myChart.on('legendselectchanged', function (params) { console.log(params); }); chart.on('click', 'series.line', function (params) { console.log(params); }); chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) { console.log(params); });
鼠标事件 ECharts 支持的鼠标事件类型,包括 ‘click’、’dblclick’、’mousedown’、’mousemove’、’mouseup’、’mouseover’、’mouseout’、’globalout’、’contextmenu’ 事件。
以下实例在点击柱形图时会弹出对话框:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // 基于准备好的dom,初始化ECharts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 处理点击事件并且弹出数据名称 myChart.on('click', function (params) { alert(params.name); });
所有的鼠标事件包含参数 params,这是一个包含点击图形的数据信息的对象,格式如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 { // 当前点击的图形元素所属的组件名称, // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。 componentType: string, // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。 seriesType: string, // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。 seriesIndex: number, // 系列名称。当 componentType 为 'series' 时有意义。 seriesName: string, // 数据名,类目名 name: string, // 数据在传入的 data 数组中的 index dataIndex: number, // 传入的原始数据项 data: Object, // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data, // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。 // 其他大部分图表中只有一种 data,dataType 无意义。 dataType: string, // 传入的数据值 value: number|Array // 数据图形的颜色。当 componentType 为 'series' 时有意义。 color: string }
如何区分鼠标点击到了哪里:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 myChart.on('click', function (params) { if (params.componentType === 'markPoint') { // 点击到了 markPoint 上 if (params.seriesIndex === 5) { // 点击到了 index 为 5 的 series 的 markPoint 上。 } } else if (params.componentType === 'series') { if (params.seriesType === 'graph') { if (params.dataType === 'edge') { // 点击到了 graph 的 edge(边)上。 } else { // 点击到了 graph 的 node(节点)上。 } } } });
使用 query 只对指定的组件的图形元素的触发回调:
1 chart.on(eventName, query, handler);
query 可为 string 或者 Object。
如果为 string 表示组件类型。格式可以是 ‘mainType’ 或者 ‘mainType.subType’。例如:
1 2 3 4 chart.on('click', 'series', function () {...}); chart.on('click', 'series.line', function () {...}); chart.on('click', 'dataZoom', function () {...}); chart.on('click', 'xAxis.category', function () {...});
如果为 Object,可以包含以下一个或多个属性,每个属性都是可选的:
1 2 3 4 5 6 7 8 9 { <mainType>Index: number // 组件 index <mainType>Name: string // 组件 name <mainType>Id: string // 组件 id dataIndex: number // 数据项 index name: string // 数据项 name dataType: string // 数据项 type,如关系图中的 'node', 'edge' element: string // 自定义系列中的 el 的 name }
例如:
1 2 3 4 5 6 7 8 9 10 chart.setOption({ // ... series: [{ name: 'uuu' // ... }] }); chart.on('mouseover', {seriesName: 'uuu'}, function () { // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时,此方法被回调。 });
例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 chart.setOption({ // ... series: [{ // ... }, { // ... data: [ {name: 'xx', value: 121}, {name: 'yy', value: 33} ] }] }); chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () { // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时,此方法被回调。 });
例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 chart.setOption({ // ... series: [{ type: 'graph', nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}], edges: [{source: 0, target: 1}] }] }); chart.on('click', {dataType: 'node'}, function () { // 关系图的节点被点击时此方法被回调。 }); chart.on('click', {dataType: 'edge'}, function () { // 关系图的边被点击时此方法被回调。 });
例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 chart.setOption({ // ... series: { // ... type: 'custom', renderItem: function (params, api) { return { type: 'group', children: [{ type: 'circle', name: 'my_el', // ... }, { // ... }] } }, data: [[12, 33]] } }) chart.on('mouseup', {element: 'my_el'}, function () { // name 为 'my_el' 的元素被 'mouseup' 时,此方法被回调。 });
你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表,显示浮层等等,如下示例代码:
1 2 3 4 5 6 7 8 9 10 11 myChart.on('click', function (parmas) { $.get('detail?q=' + params.name, function (detail) { myChart.setOption({ series: [{ name: 'pie', // 通过饼图表现单个柱子中的数据分布 data: [detail.data] }] }); }); });
行为事件 在 ECharts 中基本上所有的组件交互行为都会触发相应的事件,常用的事件和事件对应参数在 events 文档中有列出。
下面是监听一个图例开关的示例:
1 2 3 4 5 6 7 8 9 // 图例开关的行为只会触发 legendselectchanged 事件 myChart.on('legendselectchanged', function (params) { // 获取点击图例的选中状态 var isSelected = params.selected[params.name]; // 在控制台中打印 console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name); // 打印所有图例的状态 console.log(params.selected); });
触发组件行为 上面我们只说明了用户的交互操作,但有时候我们也会需要在程序里调用方法并触发图表的行为,比如显示 tooltip。
ECharts 通过 dispatchAction({ type: ‘’ }) 来触发图表行为,统一管理了所有动作,也可以根据需要去记录用户的行为路径。
以上实例用于轮播饼图中的 tooltip:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 setInterval(function () { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: app.currentIndex }); app.currentIndex = (app.currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: app.currentIndex }); // 显示 tooltip myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: app.currentIndex }); }, 1000);
旭日图 旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。
ECharts 创建旭日图很简单,只需要在 series 配置项中声明类型为 sunburst 即可,data 数据结构以树形结构声明,看下一个简单的实例:
1 2 3 4 5 6 7 8 9 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 51 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { series: { type: 'sunburst', data: [{ name: 'A', value: 10, children: [{ value: 3, name: 'Aa' }, { value: 5, name: 'Ab' }] }, { name: 'B', children: [{ name: 'Ba', value: 4 }, { name: 'Bb', value: 2 }] }, { name: 'C', value: 3 }] } }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
更多详情ECharts 旭日图 | 菜鸟教程 (runoob.com)
累了,累了,学习笔记就写到这吧,不懂的去菜鸟教程自学