Echarts 是由百度提供的数据可视化解决方案, 可以让我们快速实现功能丰富的图表, 官网链接 http://echarts.baidu.com/
使用方法
1. 引入 echarts.min.JS 文件
下载 echarts.min.JS 文件, 下载地址 http://echarts.baidu.com/download.html
创建一个挂载节点
将数据展示到挂载节点
生成数据, 并将数据导入到 option 配置对象中
- // 创建数据
- var base = +new Date(1968, 9, 3);
- var oneDay = 24 * 3600 * 1000;
- var date = [];
- var data = [Math.random() * 300];
- for (var i = 1; i <20000; i++) {
- var now = new Date(base += oneDay);
- date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
- data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
- }
- // 创建对象 option
- option = {
- tooltip: {
- trigger: 'axis',
- position: function (pt) {
- return [pt[0], '10%'];
- }
- },
- title: {
- left: 'center',
- text: '大数据量面积图',
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
- },
- restore: {},
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: date
- },
- yAxis: {
- type: 'value',
- boundaryGap: [0, '100%']
- },
- dataZoom: [{
- type: 'inside',
- start: 0,
- end: 10
- }, {
- start: 0,
- end: 10,
- handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
- handleSize: '80%',
- handleStyle: {
- color: '#fff',
- shadowBlur: 3,
- shadowColor: 'rgba(0, 0, 0, 0.6)',
- shadowOffsetX: 2,
- shadowOffsetY: 2
- }
- }],
- series: [
- {
- name:'模拟数据',
- type:'line',
- smooth:true,
- symbol: 'none',
- sampling: 'average',
- itemStyle: {
- color: 'rgb(255, 70, 131)'
- },
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgb(255, 158, 68)'
- }, {
- offset: 1,
- color: 'rgb(255, 70, 131)'
- }])
- },
- data: data
- }
- ]
- };
将 option 添加到挂载节点
- // 将 option 数据挂载到 main 节点
- echarts.init(document.getElementById('main')).setOption(option);
如何防止坐标轴越界
上方图表如果展示到移动版, 坐标轴可能部分无法显示
解决方法很简单, 只需在 option 中加一个配置项即可
- grid:{
- containLabel: true
- },
源码:
- <!doctype HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Echarts-Demo
- </title>
- <script src="./echarts.min.js">
- </script>
- </head>
- <body>
- <div id="main" style="width:100%;height:400px;">
- </div>
- <script>
- // 创建数据
- var base = +new Date(1968, 9, 3);
- var oneDay = 24 * 3600 * 1000;
- var date = [];
- var data = [Math.random() * 300];
- for (var i = 1; i < 20000; i++) {
- var now = new Date(base += oneDay);
- date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
- data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
- }
- // 创建对象 option
- option = {
- tooltip: {
- trigger: 'axis',
- position: function(pt) {
- return [pt[0], '10%'];
- }
- },
- title: {
- left: 'center',
- text: '大数据量面积图',
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
- },
- restore: {},
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: date
- },
- yAxis: {
- type: 'value',
- boundaryGap: [0, '100%']
- },
- dataZoom: [{
- type: 'inside',
- start: 0,
- end: 10
- },
- {
- start: 0,
- end: 10,
- handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
- handleSize: '80%',
- handleStyle: {
- color: '#fff',
- shadowBlur: 3,
- shadowColor: 'rgba(0, 0, 0, 0.6)',
- shadowOffsetX: 2,
- shadowOffsetY: 2
- }
- }],
- series: [{
- name: '模拟数据',
- type: 'line',
- smooth: true,
- symbol: 'none',
- sampling: 'average',
- itemStyle: {
- color: 'rgb(255, 70, 131)'
- },
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgb(255, 158, 68)'
- },
- {
- offset: 1,
- color: 'rgb(255, 70, 131)'
- }])
- },
- data: data
- }],
- grid: {
- containLabel: true
- }
- };
- // 将 option 数据挂载到 main 节点
- echarts.init(document.getElementById('main')).setOption(option);
- </script>
- </body>
- </HTML>
小结:
上面实例有一个在线的版本,, 感兴趣可以打开网页, 体会一下各种配置项的用途
博主开始没有找到正确的解决方法, 导致走了弯路, 最后发现添加一个参数就能顺利解决, 这里分享给大家, 希望沉迷开发的小伙伴, 能少走弯路
来源: http://www.jianshu.com/p/0b206c4225a7