[关闭]
@murph 2017-05-19T12:15:04.000000Z 字数 40393 阅读 790

Echarts 3.0 入门基础与实战

数据可视化

你能学到什么？
1、 浏览器可视化的原理
2、 Echarts的入门使用
3、 柱状图和折线图的实现
4、 常见的图标组件
5、 饼图的实现
6、 仪表盘的实现
7、 地图，散点图，K线图的实现
8、 多个x轴的图表
9、 值域漫游
10、 定制化主题
11、 实战项目
Echarts 官网：http://echarts.baidu.com/

image_1bgcrr03760116d13u818hj1rle9.png-69.8kB
image_1bgcrsltvbmunahitj14kl5a7m.png-76kB
image_1bgcrtp9nqdt128a1er21f1t1gu21j.png-102.4kB

浏览器画图原理

image_1bgcs0uen1hgptd3l49bt81huv20.png-108.7kB
image_1bgcsq6l8ue16dg14cc7t7quc2d.png-84.1kB

image_1bgct3kca1r2q112da0r23e1fic37.png-4.2kB
所需示例代码
canvas.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>canvas</title>
  6. </head>
  7. <body>
  9. <!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
  10. <canvas id="myCanvas" width="400px" height="300px">
  11. 您的浏览器不支持canvas标签。
  12. </canvas>
  14. <script type="text/javascript">
  15. //获取Canvas对象(画布)
  16. var canvas = document.getElementById("myCanvas");
  17. var ctx = canvas.getContext("2d");  
  18. //开始一个新的绘制路径
  19. ctx.beginPath();
  20. //设置弧线的颜色为蓝色
  21. ctx.strokeStyle = "blue";
  22. var circle = {
  23.     x : 100,    //圆心的x轴坐标值
  24.     y : 100,    //圆心的y轴坐标值
  25.     r : 50      //圆的半径
  26. };
  27. //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
  28. ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);    
  29. //按照指定的路径绘制弧线
  30. ctx.stroke();
  31. </script>
  32. </body>
  33. </html>

image_1bgct30ese2j1tge1ovf1l6g1lk22q.png-4.3kB
所需示例代码
svg.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8"/>
  5.   <title>svg</title>
  6. </head>
  7. <body>
  10. <svg width="100%" height="100%" version="1.1"
  11. xmlns="http://www.w3.org/2000/svg">
  13. <!-- circle是圆形标签 -->
  14. <circle cx="70" cy="50" r="40" stroke="black"
  15. stroke-width="2" fill="red"/>
  16. <!-- rect是长方形标签 -->
  17. <rect x='120' width="100" height="100"
  18. style="fill:rgb(0,0,255);stroke-width:1;
  19. stroke:rgb(0,0,0)"/>
  20. </svg>
  23. </body>
  24. </html>

Echarts官网教程

链接地址：http://echarts.baidu.com/tutorial.html

Echarts常用图

下载地址：http://echarts.baidu.com/download.html

image_1bgctd3ctld316kdl4j1cte9jl3k.png-92.7kB
image_1bgctfu5ho218fkqaj1v806b741.png-65.9kB
标题
图例：（选择某个图展示数据）
Y轴 X轴

直方图

image_1bgctunjqautj0hoau1pdu36r4e.png-261.5kB
代码
bar.html

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>bar</title>
  7.     <!-- 引入 echarts.js -->
  8.     <script src="../js/echarts.min.js"></script>
  9. </head>
  10. <body>
  11. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  12. <div id="main" style="width: 900px;height:600px;"></div>
  13. <script type="text/javascript">
  14. // 基于准备好的dom，初始化echarts实例
  15. var myChart = echarts.init(document.getElementById('main'));
  16. // 指定图表的配置项和数据
  17. var option = {
  18.     // 标题
  19.     title: {
  20.         text: 'ECharts 入门示例'
  21.     },
  22.     // 工具箱
  23.     toolbox: {
  24.         show: true,
  25.         feature: {
  26.             saveAsImage: {
  27.                 show: true
  28.             }
  29.         }
  30.     },
  31.     // 图例
  32.     legend: {
  33.         data: ['销量']
  34.     },
  35.     // x轴
  36.     xAxis: {
  37.         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  38.     },
  39.     yAxis: {},
  40.     // 数据
  41.     series: [{
  42.         name: '销量',
  43.         type: 'bar',
  44.         data: [5, 20, 36, 10, 10, 20]
  45.     }]
  46. };
  47. // 使用刚指定的配置项和数据显示图表。
  48. myChart.setOption(option);
  49. </script>
  50. </body>
  51. </html>

折线图

image_1bgctv7g450ht58n13i911kfk4r.png-193.5kB
image_1bgcuhu6s2fspad1ni21rl71eak58.png-29.8kB
代码
line.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>line</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11. <div id="main" style="width: 900px;height:600px;"></div>
  12. <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. var option = {
  17.     title: {
  18.         text: 'ECharts 入门示例'
  19.     },
  20.     toolbox: {
  21.         show: true,
  22.         feature: {
  23.             saveAsImage: {
  24.                 show: true
  25.             }
  26.         }
  27.     },
  28.     legend: {
  29.         data: ['销量']
  30.     },
  31.     xAxis: {
  32.         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  33.     },
  34.     yAxis: {},
  35.     series: [{
  36.         name: '销量',
  37.         type: 'bar',
  38.         data: [5, 20, 36, 10, 10, 20]
  39.     },{
  40.         name: '产量',
  41.         type: 'line',
  42.         data: [7, 30, 50, 11, 40, 80]
  43.     }]
  44. };
  45. // 使用刚指定的配置项和数据显示图表。
  46. myChart.setOption(option);
  47. </script>
  48. </body>
  49. </html>

代码
title.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11. <div id="main" style="width: 900px;height:600px;"></div>
  12. <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. var option = {
  17.     title: {
  18.         show:true,
  19.         text: 'ECharts 入门示例',
  20.         subtext:'学习ECharts就来慕课网',//副标题文本，支持使用 \n 换行
  21.         left:'center', // 数字就是像素值 ，也可以是 center left right这种值
  22.         borderColor:'red',
  23.         borderWidth:5,
  24.         target:'blank',//配合使用
  25.         link:'http://www.baidu.com',//配合使用
  27.         sublink:'http://www.baidu.com',
  28.         subtarget:'self',
  30.         textStyle:{
  31.             fontSize:40,
  32.             color:'#666',
  33.       },
  34.         subtextStyle:{
  35.             color:'red  '
  36.         }
  37.     },
  38.     toolbox: {
  39.         show: true,
  40.         feature: {
  41.             saveAsImage: {
  42.                 show: true
  43.             }
  44.         }
  45.     },
  46.     legend: {
  47.         data: ['销量']
  48.     },
  49.     xAxis: {
  50.         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  51.     },
  52.     yAxis: {},
  53.     series: [{
  54.         name: '销量',
  55.         type: 'bar',
  56.         data: [5, 20, 36, 10, 10, 20]
  57.     }]
  58. };
  59. // 使用刚指定的配置项和数据显示图表。
  60. myChart.setOption(option);
  61. </script>
  62. </body>
  63. </html>

工具栏组件

image_1bgd14pq0nho1uhpumn1lpoci96i.png-188.3kB
image_1bgdfa58ah1b3m9oov5b3neeam.png-27.6kB
代码
toolbox.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11. <div id="main" style="width: 900px;height:600px;"></div>
  12. <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. var option = {
  17.     title: {
  18.         text: 'ECharts 入门示例',
  19.     },
  20.     toolbox: {
  21.         show: true,
  22.         feature: {
  23.             dataView:{
  24.                 show:true
  25.             },
  26.             restore:{
  27.                 show:true
  28.             },
  29.             dataZoom:{
  30.                 show:true
  31.             },
  32.             saveAsImage: {
  33.                 show: true
  34.             },
  35.             magicType: {
  36.                 type: ['line', 'bar']
  37.             }
  38.         }
  39.     },
  40.     legend: {
  41.         data: ['销量']
  42.     },
  43.     xAxis: {
  44.         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  45.     },
  46.     yAxis: {},
  47.     series: [{
  48.         name: '销量',
  49.         type: 'bar',
  50.         data: [5, 20, 36, 10, 10, 20]
  51.     }]
  52. };
  53. // 使用刚指定的配置项和数据显示图表。
  54. myChart.setOption(option);
  55. </script>
  56. </body>
  57. </html>

弹窗组件

image_1bgdf86mg15cikk6glq17kv1uoq9s.png-107.7kB
image_1bgdf8uuu1o1ab951gci9971lg2a9.png-25kB
代码
tooltip.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11. <div id="main" style="width: 900px;height:600px;"></div>
  12. <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. var option = {
  17.     title: {
  18.         text: 'ECharts 入门示例',
  19.     },
  20.     toolbox: {
  21.         show: true,
  22.         feature: {
  23.             dataView:{
  24.                 show:true
  25.             },
  26.             restore:{
  27.                 show:true
  28.             },
  29.             dataZoom:{
  30.                 show:true
  31.             },
  32.             saveAsImage: {
  33.                 show: true
  34.             },
  35.             magicType: {//动态类型切换
  36.                 type: ['line', 'bar']
  37.             }
  38.         }
  39.     },
  40.     tooltip: {//提示框组件。
  41.         trigger: 'axis',//触发类型。'item' 'axis'
  42.         showDelay:'40',//浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
  43.         transitionDuration:'0.8',//提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
  44.     },
  45.     legend: {
  46.         data: ['销量']
  47.     },
  48.     xAxis: {
  49.         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  50.     },
  51.     yAxis: {},
  52.     series: [{
  53.         name: '销量',
  54.         type: 'bar',
  55.         data: [5, 20, 36, 10, 10, 20]
  56.     }]
  57. };
  58. // 使用刚指定的配置项和数据显示图表。
  59. myChart.setOption(option);
  60. </script>
  61. </body>
  62. </html>

标记线和标记点

image_1bgdfd9hq1oq3fug12f5dj1k0bc0.png-111.1kB
image_1bgdfojchenj1vonf46chf1ga6cd.png-33.5kB
代码
mark.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11. <div id="main" style="width: 900px;height:600px;"></div>
  12. <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. var option = {
  17.     title: {
  18.         text: 'ECharts 入门示例',
  19.     },
  20.     toolbox: {
  21.         show: true,
  22.         feature: {
  23.             dataView:{
  24.                 show:true
  25.             },
  26.             restore:{
  27.                 show:true
  28.             },
  29.             dataZoom:{
  30.                 show:true
  31.             },
  32.             saveAsImage: {
  33.                 show: true
  34.             },
  35.             magicType: {
  36.                 type: ['line', 'bar']
  37.             }
  38.         }
  39.     },
  40.     tooltip: {
  41.         trigger: 'axis'
  42.     },
  43.     legend: {
  44.         data: ['销量']
  45.     },
  46.     xAxis: {
  47.         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  48.     },
  49.     yAxis: {},
  50.     series: [{
  51.         name: '销量',
  52.         type: 'line',
  53.         data: [5, 20, 36, 10, 10, 20],
  54.         markPoint: {
  55.             data: [
  56.                 {type: 'max', name: '最大值'},
  57.                 {type: 'min', name: '最小值',symbol:'arrow'}
  58.             ]
  59.         },
  60.         markLine: {
  61.             data: [
  62.                 {type: 'average', name: '平均值'}
  63.             ]
  64.         }
  65.     }]
  66. };
  67. // 使用刚指定的配置项和数据显示图表。
  68. myChart.setOption(option);
  69. </script>
  70. </body>
  71. </html>

弹窗组件

Echarts其他常用图

饼图

image_1bgdol9pnnnujr81rpvoqnd2c.png-103.1kB
代码
pie.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11. <div id="main" style="width: 900px;height:600px;"></div>
  12. <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. var option = {
  17.     title : {
  18.         text: '某站点用户访问来源',
  19.         subtext: '纯属虚构',
  20.         x:'center',
  21.     },
  22.     tooltip : {
  23.         trigger: 'item',
  24.         formatter: "{a} <br/>{b} : {c} ({d}%)"
  25.     },
  26.     legend: {
  27.         orient: 'vertical',
  28.         left: 'left',
  29.         data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
  30.     },
  31.     series : [
  32.         {
  33.             name: '访问来源',
  34.             type: 'pie',
  35.             radius : '55%',
  36.             center: ['50%', '60%'],
  37.             data:[
  38.                 {value:335, name:'直接访问'},
  39.                 {value:310, name:'邮件营销'},
  40.                 {value:234, name:'联盟广告'},
  41.                 {value:135, name:'视频广告'},
  42.                 {value:1548, name:'搜索引擎'}
  43.             ]
  44.         }
  45.     ]
  46. };
  47. // 使用刚指定的配置项和数据显示图表。
  48. myChart.setOption(option);
  49. </script>
  50. </body>
  51. </html>

仪表图

image_1bge064visdp17qh451gnrqftp.png-108.2kB
代码
gauge.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11. <div id="main" style="width: 900px;height:600px;"></div>
  12. <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. var option = {
  17.     tooltip : {
  18.         formatter: "{a} <br/>{b} : {c}%"
  19.     },
  20.     toolbox: {
  21.         feature: {
  22.             restore: {},
  23.             saveAsImage: {}
  24.         }
  25.     },
  26.     series: [
  27.         {
  28.             name: '业务指标',
  29.             type: 'gauge',
  30.             detail: {formatter:'{value}%'},
  31.             data: [{value: 32, name: '完成率'}]
  32.         }
  33.     ]
  34. };
  35. // 使用刚指定的配置项和数据显示图表。
  36. myChart.setOption(option);
  37. setInterval(function () {
  38.     option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  39.     myChart.setOption(option, true);
  40. },2000);
  41. </script>
  42. </body>
  43. </html>

地图

代码
map.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8.     <script src="../js/china.js"></script>
  9. </head>
  10. <body>
  11.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  12. <div id="main" style="width: 900px;height:600px;"></div>
  13. <script type="text/javascript">
  14.         // 基于准备好的dom，初始化echarts实例
  15. var myChart = echarts.init(document.getElementById('main'));
  16. var geoCoordMap = {
  17.     '上海': [121.4648,31.2891],
  18.     '东莞': [113.8953,22.901],
  19.     '东营': [118.7073,37.5513],
  20.     '中山': [113.4229,22.478],
  21.     '临汾': [111.4783,36.1615],
  22.     '临沂': [118.3118,35.2936],
  23.     '丹东': [124.541,40.4242],
  24.     '丽水': [119.5642,28.1854],
  25.     '乌鲁木齐': [87.9236,43.5883],
  26.     '佛山': [112.8955,23.1097],
  27.     '保定': [115.0488,39.0948],
  28.     '兰州': [103.5901,36.3043],
  29.     '包头': [110.3467,41.4899],
  30.     '北京': [116.4551,40.2539],
  31.     '北海': [109.314,21.6211],
  32.     '南京': [118.8062,31.9208],
  33.     '南宁': [108.479,23.1152],
  34.     '南昌': [116.0046,28.6633],
  35.     '南通': [121.1023,32.1625],
  36.     '厦门': [118.1689,24.6478],
  37.     '台州': [121.1353,28.6688],
  38.     '合肥': [117.29,32.0581],
  39.     '呼和浩特': [111.4124,40.4901],
  40.     '咸阳': [108.4131,34.8706],
  41.     '哈尔滨': [127.9688,45.368],
  42.     '唐山': [118.4766,39.6826],
  43.     '嘉兴': [120.9155,30.6354],
  44.     '大同': [113.7854,39.8035],
  45.     '大连': [122.2229,39.4409],
  46.     '天津': [117.4219,39.4189],
  47.     '太原': [112.3352,37.9413],
  48.     '威海': [121.9482,37.1393],
  49.     '宁波': [121.5967,29.6466],
  50.     '宝鸡': [107.1826,34.3433],
  51.     '宿迁': [118.5535,33.7775],
  52.     '常州': [119.4543,31.5582],
  53.     '广州': [113.5107,23.2196],
  54.     '廊坊': [116.521,39.0509],
  55.     '延安': [109.1052,36.4252],
  56.     '张家口': [115.1477,40.8527],
  57.     '徐州': [117.5208,34.3268],
  58.     '德州': [116.6858,37.2107],
  59.     '惠州': [114.6204,23.1647],
  60.     '成都': [103.9526,30.7617],
  61.     '扬州': [119.4653,32.8162],
  62.     '承德': [117.5757,41.4075],
  63.     '拉萨': [91.1865,30.1465],
  64.     '无锡': [120.3442,31.5527],
  65.     '日照': [119.2786,35.5023],
  66.     '昆明': [102.9199,25.4663],
  67.     '杭州': [119.5313,29.8773],
  68.     '枣庄': [117.323,34.8926],
  69.     '柳州': [109.3799,24.9774],
  70.     '株洲': [113.5327,27.0319],
  71.     '武汉': [114.3896,30.6628],
  72.     '汕头': [117.1692,23.3405],
  73.     '江门': [112.6318,22.1484],
  74.     '沈阳': [123.1238,42.1216],
  75.     '沧州': [116.8286,38.2104],
  76.     '河源': [114.917,23.9722],
  77.     '泉州': [118.3228,25.1147],
  78.     '泰安': [117.0264,36.0516],
  79.     '泰州': [120.0586,32.5525],
  80.     '济南': [117.1582,36.8701],
  81.     '济宁': [116.8286,35.3375],
  82.     '海口': [110.3893,19.8516],
  83.     '淄博': [118.0371,36.6064],
  84.     '淮安': [118.927,33.4039],
  85.     '深圳': [114.5435,22.5439],
  86.     '清远': [112.9175,24.3292],
  87.     '温州': [120.498,27.8119],
  88.     '渭南': [109.7864,35.0299],
  89.     '湖州': [119.8608,30.7782],
  90.     '湘潭': [112.5439,27.7075],
  91.     '滨州': [117.8174,37.4963],
  92.     '潍坊': [119.0918,36.524],
  93.     '烟台': [120.7397,37.5128],
  94.     '玉溪': [101.9312,23.8898],
  95.     '珠海': [113.7305,22.1155],
  96.     '盐城': [120.2234,33.5577],
  97.     '盘锦': [121.9482,41.0449],
  98.     '石家庄': [114.4995,38.1006],
  99.     '福州': [119.4543,25.9222],
  100.     '秦皇岛': [119.2126,40.0232],
  101.     '绍兴': [120.564,29.7565],
  102.     '聊城': [115.9167,36.4032],
  103.     '肇庆': [112.1265,23.5822],
  104.     '舟山': [122.2559,30.2234],
  105.     '苏州': [120.6519,31.3989],
  106.     '莱芜': [117.6526,36.2714],
  107.     '菏泽': [115.6201,35.2057],
  108.     '营口': [122.4316,40.4297],
  109.     '葫芦岛': [120.1575,40.578],
  110.     '衡水': [115.8838,37.7161],
  111.     '衢州': [118.6853,28.8666],
  112.     '西宁': [101.4038,36.8207],
  113.     '西安': [109.1162,34.2004],
  114.     '贵阳': [106.6992,26.7682],
  115.     '连云港': [119.1248,34.552],
  116.     '邢台': [114.8071,37.2821],
  117.     '邯郸': [114.4775,36.535],
  118.     '郑州': [113.4668,34.6234],
  119.     '鄂尔多斯': [108.9734,39.2487],
  120.     '重庆': [107.7539,30.1904],
  121.     '金华': [120.0037,29.1028],
  122.     '铜川': [109.0393,35.1947],
  123.     '银川': [106.3586,38.1775],
  124.     '镇江': [119.4763,31.9702],
  125.     '长春': [125.8154,44.2584],
  126.     '长沙': [113.0823,28.2568],
  127.     '长治': [112.8625,36.4746],
  128.     '阳泉': [113.4778,38.0951],
  129.     '青岛': [120.4651,36.3373],
  130.     '韶关': [113.7964,24.7028]
  131. };
  132. var BJData = [
  133.     [{name:'北京'}, {name:'上海',value:95}],
  134.     [{name:'北京'}, {name:'广州',value:90}],
  135.     [{name:'北京'}, {name:'大连',value:80}],
  136.     [{name:'北京'}, {name:'南宁',value:70}],
  137.     [{name:'北京'}, {name:'南昌',value:60}],
  138.     [{name:'北京'}, {name:'拉萨',value:50}],
  139.     [{name:'北京'}, {name:'长春',value:40}],
  140.     [{name:'北京'}, {name:'包头',value:30}],
  141.     [{name:'北京'}, {name:'重庆',value:20}],
  142.     [{name:'北京'}, {name:'常州',value:10}]
  143. ];
  144. var SHData = [
  145.     [{name:'上海'},{name:'包头',value:95}],
  146.     [{name:'上海'},{name:'昆明',value:90}],
  147.     [{name:'上海'},{name:'广州',value:80}],
  148.     [{name:'上海'},{name:'郑州',value:70}],
  149.     [{name:'上海'},{name:'长春',value:60}],
  150.     [{name:'上海'},{name:'重庆',value:50}],
  151.     [{name:'上海'},{name:'长沙',value:40}],
  152.     [{name:'上海'},{name:'北京',value:30}],
  153.     [{name:'上海'},{name:'丹东',value:20}],
  154.     [{name:'上海'},{name:'大连',value:10}]
  155. ];
  156. var GZData = [
  157.     [{name:'广州'},{name:'福州',value:95}],
  158.     [{name:'广州'},{name:'太原',value:90}],
  159.     [{name:'广州'},{name:'长春',value:80}],
  160.     [{name:'广州'},{name:'重庆',value:70}],
  161.     [{name:'广州'},{name:'西安',value:60}],
  162.     [{name:'广州'},{name:'成都',value:50}],
  163.     [{name:'广州'},{name:'常州',value:40}],
  164.     [{name:'广州'},{name:'北京',value:30}],
  165.     [{name:'广州'},{name:'北海',value:20}],
  166.     [{name:'广州'},{name:'海口',value:10}]
  167. ];
  168. var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
  169. var convertData = function (data) {
  170.     var res = [];
  171.     for (var i = 0; i < data.length; i++) {
  172.         var dataItem = data[i];
  173.         var fromCoord = geoCoordMap[dataItem[0].name];
  174.         var toCoord = geoCoordMap[dataItem[1].name];
  175.         if (fromCoord && toCoord) {
  176.             res.push([{
  177.                 name: dataItem[0].name,
  178.                 coord: fromCoord
  179.             }, {
  180.                 name: dataItem[1].name,
  181.                 coord: toCoord
  182.             }]);
  183.         }
  184.     }
  185.     return res;
  186. };
  187. var color = ['#a6c84c', '#ffa022', '#46bee9'];
  188. var series = [];
  189. [['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
  190.     series.push({
  191.         name: item[0] + ' Top10',
  192.         type: 'lines',
  193.         zlevel: 1,
  194.         effect: {
  195.             show: true,
  196.             period: 6,
  197.             trailLength: 0.7,
  198.             color: '#fff',
  199.             symbolSize: 3
  200.         },
  201.         lineStyle: {
  202.             normal: {
  203.                 color: color[i],
  204.                 width: 0,
  205.                 curveness: 0.2
  206.             }
  207.         },
  208.         data: convertData(item[1])
  209.     },
  210.     {
  211.         name: item[0] + ' Top10',
  212.         type: 'lines',
  213.         zlevel: 2,
  214.         effect: {
  215.             show: true,
  216.             period: 6,
  217.             trailLength: 0,
  218.             symbol: planePath,
  219.             symbolSize: 15
  220.         },
  221.         lineStyle: {
  222.             normal: {
  223.                 color: color[i],
  224.                 width: 1,
  225.                 opacity: 0.4,
  226.                 curveness: 0.2
  227.             }
  228.         },
  229.         data: convertData(item[1])
  230.     },
  231.     {
  232.         name: item[0] + ' Top10',
  233.         type: 'effectScatter',
  234.         coordinateSystem: 'geo',
  235.         zlevel: 2,
  236.         rippleEffect: {
  237.             brushType: 'stroke'
  238.         },
  239.         label: {
  240.             normal: {
  241.                 show: true,
  242.                 position: 'right',
  243.                 formatter: '{b}'
  244.             }
  245.         },
  246.         symbolSize: function (val) {
  247.             return val[2] / 8;
  248.         },
  249.         itemStyle: {
  250.             normal: {
  251.                 color: color[i]
  252.             }
  253.         },
  254.         data: item[1].map(function (dataItem) {
  255.             return {
  256.                 name: dataItem[1].name,
  257.                 value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
  258.             };
  259.         })
  260.     });
  261. });
  262. option = {
  263.     backgroundColor: '#404a59',
  264.     title : {
  265.         text: '模拟迁徙',
  266.         subtext: '数据纯属虚构',
  267.         left: 'center',
  268.         textStyle : {
  269.             color: '#fff'
  270.         }
  271.     },
  272.     tooltip : {
  273.         trigger: 'item'
  274.     },
  275.     legend: {
  276.         orient: 'vertical',
  277.         top: 'bottom',
  278.         left: 'right',
  279.         data:['北京 Top10', '上海 Top10', '广州 Top10'],
  280.         textStyle: {
  281.             color: '#fff'
  282.         },
  283.         selectedMode: 'single'
  284.     },
  285.     geo: {
  286.         map: 'china',
  287.         label: {
  288.             emphasis: {
  289.                 show: false
  290.             }
  291.         },
  292.         roam: true,
  293.         itemStyle: {
  294.             normal: {
  295.                 areaColor: '#323c48',
  296.                 borderColor: '#404a59'
  297.             },
  298.             emphasis: {
  299.                 areaColor: '#2a333d'
  300.             }
  301.         }
  302.     },
  303.     series: series
  304. };
  305. // 使用刚指定的配置项和数据显示图表。
  306. myChart.setOption(option);
  307. </script>
  308. </body>
  309. </html>

散点图

代码
scatter.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11. <div id="main" style="width: 900px;height:600px;"></div>
  12. <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. var dataBJ = [
  17.     [1,55,9,56,0.46,18,6,"良"],
  18.     [2,25,11,21,0.65,34,9,"优"],
  19.     [3,56,7,63,0.3,14,5,"良"],
  20.     [4,33,7,29,0.33,16,6,"优"],
  21.     [5,42,24,44,0.76,40,16,"优"],
  22.     [6,82,58,90,1.77,68,33,"良"],
  23.     [7,74,49,77,1.46,48,27,"良"],
  24.     [8,78,55,80,1.29,59,29,"良"],
  25.     [9,267,216,280,4.8,108,64,"重度污染"],
  26.     [10,185,127,216,2.52,61,27,"中度污染"],
  27.     [11,39,19,38,0.57,31,15,"优"],
  28.     [12,41,11,40,0.43,21,7,"优"],
  29.     [13,64,38,74,1.04,46,22,"良"],
  30.     [14,108,79,120,1.7,75,41,"轻度污染"],
  31.     [15,108,63,116,1.48,44,26,"轻度污染"],
  32.     [16,33,6,29,0.34,13,5,"优"],
  33.     [17,94,66,110,1.54,62,31,"良"],
  34.     [18,186,142,192,3.88,93,79,"中度污染"],
  35.     [19,57,31,54,0.96,32,14,"良"],
  36.     [20,22,8,17,0.48,23,10,"优"],
  37.     [21,39,15,36,0.61,29,13,"优"],
  38.     [22,94,69,114,2.08,73,39,"良"],
  39.     [23,99,73,110,2.43,76,48,"良"],
  40.     [24,31,12,30,0.5,32,16,"优"],
  41.     [25,42,27,43,1,53,22,"优"],
  42.     [26,154,117,157,3.05,92,58,"中度污染"],
  43.     [27,234,185,230,4.09,123,69,"重度污染"],
  44.     [28,160,120,186,2.77,91,50,"中度污染"],
  45.     [29,134,96,165,2.76,83,41,"轻度污染"],
  46.     [30,52,24,60,1.03,50,21,"良"],
  47.     [31,46,5,49,0.28,10,6,"优"]
  48. ];
  49. var dataGZ = [
  50.     [1,26,37,27,1.163,27,13,"优"],
  51.     [2,85,62,71,1.195,60,8,"良"],
  52.     [3,78,38,74,1.363,37,7,"良"],
  53.     [4,21,21,36,0.634,40,9,"优"],
  54.     [5,41,42,46,0.915,81,13,"优"],
  55.     [6,56,52,69,1.067,92,16,"良"],
  56.     [7,64,30,28,0.924,51,2,"良"],
  57.     [8,55,48,74,1.236,75,26,"良"],
  58.     [9,76,85,113,1.237,114,27,"良"],
  59.     [10,91,81,104,1.041,56,40,"良"],
  60.     [11,84,39,60,0.964,25,11,"良"],
  61.     [12,64,51,101,0.862,58,23,"良"],
  62.     [13,70,69,120,1.198,65,36,"良"],
  63.     [14,77,105,178,2.549,64,16,"良"],
  64.     [15,109,68,87,0.996,74,29,"轻度污染"],
  65.     [16,73,68,97,0.905,51,34,"良"],
  66.     [17,54,27,47,0.592,53,12,"良"],
  67.     [18,51,61,97,0.811,65,19,"良"],
  68.     [19,91,71,121,1.374,43,18,"良"],
  69.     [20,73,102,182,2.787,44,19,"良"],
  70.     [21,73,50,76,0.717,31,20,"良"],
  71.     [22,84,94,140,2.238,68,18,"良"],
  72.     [23,93,77,104,1.165,53,7,"良"],
  73.     [24,99,130,227,3.97,55,15,"良"],
  74.     [25,146,84,139,1.094,40,17,"轻度污染"],
  75.     [26,113,108,137,1.481,48,15,"轻度污染"],
  76.     [27,81,48,62,1.619,26,3,"良"],
  77.     [28,56,48,68,1.336,37,9,"良"],
  78.     [29,82,92,174,3.29,0,13,"良"],
  79.     [30,106,116,188,3.628,101,16,"轻度污染"],
  80.     [31,118,50,0,1.383,76,11,"轻度污染"]
  81. ];
  82. var dataSH = [
  83.     [1,91,45,125,0.82,34,23,"良"],
  84.     [2,65,27,78,0.86,45,29,"良"],
  85.     [3,83,60,84,1.09,73,27,"良"],
  86.     [4,109,81,121,1.28,68,51,"轻度污染"],
  87.     [5,106,77,114,1.07,55,51,"轻度污染"],
  88.     [6,109,81,121,1.28,68,51,"轻度污染"],
  89.     [7,106,77,114,1.07,55,51,"轻度污染"],
  90.     [8,89,65,78,0.86,51,26,"良"],
  91.     [9,53,33,47,0.64,50,17,"良"],
  92.     [10,80,55,80,1.01,75,24,"良"],
  93.     [11,117,81,124,1.03,45,24,"轻度污染"],
  94.     [12,99,71,142,1.1,62,42,"良"],
  95.     [13,95,69,130,1.28,74,50,"良"],
  96.     [14,116,87,131,1.47,84,40,"轻度污染"],
  97.     [15,108,80,121,1.3,85,37,"轻度污染"],
  98.     [16,134,83,167,1.16,57,43,"轻度污染"],
  99.     [17,79,43,107,1.05,59,37,"良"],
  100.     [18,71,46,89,0.86,64,25,"良"],
  101.     [19,97,71,113,1.17,88,31,"良"],
  102.     [20,84,57,91,0.85,55,31,"良"],
  103.     [21,87,63,101,0.9,56,41,"良"],
  104.     [22,104,77,119,1.09,73,48,"轻度污染"],
  105.     [23,87,62,100,1,72,28,"良"],
  106.     [24,168,128,172,1.49,97,56,"中度污染"],
  107.     [25,65,45,51,0.74,39,17,"良"],
  108.     [26,39,24,38,0.61,47,17,"优"],
  109.     [27,39,24,39,0.59,50,19,"优"],
  110.     [28,93,68,96,1.05,79,29,"良"],
  111.     [29,188,143,197,1.66,99,51,"中度污染"],
  112.     [30,174,131,174,1.55,108,50,"中度污染"],
  113.     [31,187,143,201,1.39,89,53,"中度污染"]
  114. ];
  115. var schema = [
  116.     {name: 'date', index: 0, text: '日'},
  117.     {name: 'AQIindex', index: 1, text: 'AQI指数'},
  118.     {name: 'PM25', index: 2, text: 'PM2.5'},
  119.     {name: 'PM10', index: 3, text: 'PM10'},
  120.     {name: 'CO', index: 4, text: '一氧化碳（CO）'},
  121.     {name: 'NO2', index: 5, text: '二氧化氮（NO2）'},
  122.     {name: 'SO2', index: 6, text: '二氧化硫（SO2）'}
  123. ];
  124. var itemStyle = {
  125.     normal: {
  126.         opacity: 0.8,
  127.         shadowBlur: 10,
  128.         shadowOffsetX: 0,
  129.         shadowOffsetY: 0,
  130.         shadowColor: 'rgba(0, 0, 0, 0.5)'
  131.     }
  132. };
  133. option = {
  134.     backgroundColor: '#333',
  135.     color: [
  136.         '#dd4444', '#fec42c', '#80F1BE'
  137.     ],
  138.     legend: {
  139.         y: 'top',
  140.         data: ['北京', '上海', '广州'],
  141.         textStyle: {
  142.             color: '#fff',
  143.             fontSize: 16
  144.         }
  145.     },
  146.     grid: {
  147.         x: '10%',
  148.         x2: 150,
  149.         y: '18%',
  150.         y2: '10%'
  151.     },
  152.     tooltip: {
  153.         padding: 10,
  154.         backgroundColor: '#222',
  155.         borderColor: '#777',
  156.         borderWidth: 1,
  157.         formatter: function (obj) {
  158.             var value = obj.value;
  159.             return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
  160.                 + obj.seriesName + ' ' + value[0] + '日：'
  161.                 + value[7]
  162.                 + '</div>'
  163.                 + schema[1].text + '：' + value[1] + '<br>'
  164.                 + schema[2].text + '：' + value[2] + '<br>'
  165.                 + schema[3].text + '：' + value[3] + '<br>'
  166.                 + schema[4].text + '：' + value[4] + '<br>'
  167.                 + schema[5].text + '：' + value[5] + '<br>'
  168.                 + schema[6].text + '：' + value[6] + '<br>';
  169.         }
  170.     },
  171.     xAxis: {
  172.         type: 'value',
  173.         name: '日期',
  174.         nameGap: 16,
  175.         nameTextStyle: {
  176.             color: '#fff',
  177.             fontSize: 14
  178.         },
  179.         max: 31,
  180.         splitLine: {
  181.             show: false
  182.         },
  183.         axisLine: {
  184.             lineStyle: {
  185.                 color: '#777'
  186.             }
  187.         },
  188.         axisTick: {
  189.             lineStyle: {
  190.                 color: '#777'
  191.             }
  192.         },
  193.         axisLabel: {
  194.             formatter: '{value}',
  195.             textStyle: {
  196.                 color: '#fff'
  197.             }
  198.         }
  199.     },
  200.     yAxis: {
  201.         type: 'value',
  202.         name: 'AQI指数',
  203.         nameLocation: 'end',
  204.         nameGap: 20,
  205.         nameTextStyle: {
  206.             color: '#fff',
  207.             fontSize: 16
  208.         },
  209.         axisLine: {
  210.             lineStyle: {
  211.                 color: '#777'
  212.             }
  213.         },
  214.         axisTick: {
  215.             lineStyle: {
  216.                 color: '#777'
  217.             }
  218.         },
  219.         splitLine: {
  220.             show: false
  221.         },
  222.         axisLabel: {
  223.             textStyle: {
  224.                 color: '#fff'
  225.             }
  226.         }
  227.     },
  228.     visualMap: [
  229.         {
  230.             left: 'right',
  231.             top: '10%',
  232.             dimension: 2,
  233.             min: 0,
  234.             max: 250,
  235.             itemWidth: 30,
  236.             itemHeight: 120,
  237.             calculable: true,
  238.             precision: 0.1,
  239.             text: ['圆形大小：PM2.5'],
  240.             textGap: 30,
  241.             textStyle: {
  242.                 color: '#fff'
  243.             },
  244.             inRange: {
  245.                 symbolSize: [10, 70]
  246.             },
  247.             outOfRange: {
  248.                 symbolSize: [10, 70],
  249.                 color: ['rgba(255,255,255,.2)']
  250.             },
  251.             controller: {
  252.                 inRange: {
  253.                     color: ['#c23531']
  254.                 },
  255.                 outOfRange: {
  256.                     color: ['#444']
  257.                 }
  258.             }
  259.         },
  260.         {
  261.             left: 'right',
  262.             bottom: '5%',
  263.             dimension: 6,
  264.             min: 0,
  265.             max: 50,
  266.             itemHeight: 120,
  267.             calculable: true,
  268.             precision: 0.1,
  269.             text: ['明暗：二氧化硫'],
  270.             textGap: 30,
  271.             textStyle: {
  272.                 color: '#fff'
  273.             },
  274.             inRange: {
  275.                 colorLightness: [1, 0.5]
  276.             },
  277.             outOfRange: {
  278.                 color: ['rgba(255,255,255,.2)']
  279.             },
  280.             controller: {
  281.                 inRange: {
  282.                     color: ['#c23531']
  283.                 },
  284.                 outOfRange: {
  285.                     color: ['#444']
  286.                 }
  287.             }
  288.         }
  289.     ],
  290.     series: [
  291.         {
  292.             name: '北京',
  293.             type: 'scatter',
  294.             itemStyle: itemStyle,
  295.             data: dataBJ
  296.         },
  297.         {
  298.             name: '上海',
  299.             type: 'scatter',
  300.             itemStyle: itemStyle,
  301.             data: dataSH
  302.         },
  303.         {
  304.             name: '广州',
  305.             type: 'scatter',
  306.             itemStyle: itemStyle,
  307.             data: dataGZ
  308.         }
  309.     ]
  310. };
  311. // 使用刚指定的配置项和数据显示图表。
  312. myChart.setOption(option);
  313. </script>
  314. </body>
  315. </html>

雷达图

代码
rader.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11. <div id="main" style="width: 900px;height:600px;"></div>
  12. <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. option = {
  17.     title: {
  18.         text: '基础雷达图'
  19.     },
  20.     tooltip: {},
  21.     legend: {
  22.         data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
  23.     },
  24.     radar: {
  25.         // shape: 'circle',
  26.         indicator: [
  27.            { name: '销售（sales）', max: 6500},
  28.            { name: '管理（Administration）', max: 16000},
  29.            { name: '信息技术（Information Techology）', max: 30000},
  30.            { name: '客服（Customer Support）', max: 38000},
  31.            { name: '研发（Development）', max: 52000},
  32.            { name: '市场（Marketing）', max: 25000}
  33.         ]
  34.     },
  35.     series: [{
  36.         name: '预算 vs 开销（Budget vs spending）',
  37.         type: 'radar',
  38.         // areaStyle: {normal: {}},
  39.         data : [
  40.             {
  41.                 value : [4300, 10000, 28000, 35000, 50000, 19000],
  42.                 name : '预算分配（Allocated Budget）'
  43.             },
  44.              {
  45.                 value : [5000, 14000, 28000, 31000, 42000, 21000],
  46.                 name : '实际开销（Actual Spending）'
  47.             }
  48.         ]
  49.     }]
  50. };
  51. // 使用刚指定的配置项和数据显示图表。
  52. myChart.setOption(option);
  53. </script>
  54. </body>
  55. </html>

k线图

代码
kline.html

  1. !DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11. <div id="main" style="width: 900px;height:600px;"></div>
  12. <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
  17. var data0 = splitData([
  18.     ['2013/1/24', 2320.26,2320.26,2287.3,2362.94],
  19.     ['2013/1/25', 2300,2291.3,2288.26,2308.38],
  20.     ['2013/1/28', 2295.35,2346.5,2295.35,2346.92],
  21.     ['2013/1/29', 2347.22,2358.98,2337.35,2363.8],
  22.     ['2013/1/30', 2360.75,2382.48,2347.89,2383.76],
  23.     ['2013/1/31', 2383.43,2385.42,2371.23,2391.82],
  24.     ['2013/2/1', 2377.41,2419.02,2369.57,2421.15],
  25.     ['2013/2/4', 2425.92,2428.15,2417.58,2440.38],
  26.     ['2013/2/5', 2411,2433.13,2403.3,2437.42],
  27.     ['2013/2/6', 2432.68,2434.48,2427.7,2441.73],
  28.     ['2013/2/7', 2430.69,2418.53,2394.22,2433.89],
  29.     ['2013/2/8', 2416.62,2432.4,2414.4,2443.03],
  30.     ['2013/2/18', 2441.91,2421.56,2415.43,2444.8],
  31.     ['2013/2/19', 2420.26,2382.91,2373.53,2427.07],
  32.     ['2013/2/20', 2383.49,2397.18,2370.61,2397.94],
  33.     ['2013/2/21', 2378.82,2325.95,2309.17,2378.82],
  34.     ['2013/2/22', 2322.94,2314.16,2308.76,2330.88],
  35.     ['2013/2/25', 2320.62,2325.82,2315.01,2338.78],
  36.     ['2013/2/26', 2313.74,2293.34,2289.89,2340.71],
  37.     ['2013/2/27', 2297.77,2313.22,2292.03,2324.63],
  38.     ['2013/2/28', 2322.32,2365.59,2308.92,2366.16],
  39.     ['2013/3/1', 2364.54,2359.51,2330.86,2369.65],
  40.     ['2013/3/4', 2332.08,2273.4,2259.25,2333.54],
  41.     ['2013/3/5', 2274.81,2326.31,2270.1,2328.14],
  42.     ['2013/3/6', 2333.61,2347.18,2321.6,2351.44],
  43.     ['2013/3/7', 2340.44,2324.29,2304.27,2352.02],
  44.     ['2013/3/8', 2326.42,2318.61,2314.59,2333.67],
  45.     ['2013/3/11', 2314.68,2310.59,2296.58,2320.96],
  46.     ['2013/3/12', 2309.16,2286.6,2264.83,2333.29],
  47.     ['2013/3/13', 2282.17,2263.97,2253.25,2286.33],
  48.     ['2013/3/14', 2255.77,2270.28,2253.31,2276.22],
  49.     ['2013/3/15', 2269.31,2278.4,2250,2312.08],
  50.     ['2013/3/18', 2267.29,2240.02,2239.21,2276.05],
  51.     ['2013/3/19', 2244.26,2257.43,2232.02,2261.31],
  52.     ['2013/3/20', 2257.74,2317.37,2257.42,2317.86],
  53.     ['2013/3/21', 2318.21,2324.24,2311.6,2330.81],
  54.     ['2013/3/22', 2321.4,2328.28,2314.97,2332],
  55.     ['2013/3/25', 2334.74,2326.72,2319.91,2344.89],
  56.     ['2013/3/26', 2318.58,2297.67,2281.12,2319.99],
  57.     ['2013/3/27', 2299.38,2301.26,2289,2323.48],
  58.     ['2013/3/28', 2273.55,2236.3,2232.91,2273.55],
  59.     ['2013/3/29', 2238.49,2236.62,2228.81,2246.87],
  60.     ['2013/4/1', 2229.46,2234.4,2227.31,2243.95],
  61.     ['2013/4/2', 2234.9,2227.74,2220.44,2253.42],
  62.     ['2013/4/3', 2232.69,2225.29,2217.25,2241.34],
  63.     ['2013/4/8', 2196.24,2211.59,2180.67,2212.59],
  64.     ['2013/4/9', 2215.47,2225.77,2215.47,2234.73],
  65.     ['2013/4/10', 2224.93,2226.13,2212.56,2233.04],
  66.     ['2013/4/11', 2236.98,2219.55,2217.26,2242.48],
  67.     ['2013/4/12', 2218.09,2206.78,2204.44,2226.26],
  68.     ['2013/4/15', 2199.91,2181.94,2177.39,2204.99],
  69.     ['2013/4/16', 2169.63,2194.85,2165.78,2196.43],
  70.     ['2013/4/17', 2195.03,2193.8,2178.47,2197.51],
  71.     ['2013/4/18', 2181.82,2197.6,2175.44,2206.03],
  72.     ['2013/4/19', 2201.12,2244.64,2200.58,2250.11],
  73.     ['2013/4/22', 2236.4,2242.17,2232.26,2245.12],
  74.     ['2013/4/23', 2242.62,2184.54,2182.81,2242.62],
  75.     ['2013/4/24', 2187.35,2218.32,2184.11,2226.12],
  76.     ['2013/4/25', 2213.19,2199.31,2191.85,2224.63],
  77.     ['2013/4/26', 2203.89,2177.91,2173.86,2210.58],
  78.     ['2013/5/2', 2170.78,2174.12,2161.14,2179.65],
  79.     ['2013/5/3', 2179.05,2205.5,2179.05,2222.81],
  80.     ['2013/5/6', 2212.5,2231.17,2212.5,2236.07],
  81.     ['2013/5/7', 2227.86,2235.57,2219.44,2240.26],
  82.     ['2013/5/8', 2242.39,2246.3,2235.42,2255.21],
  83.     ['2013/5/9', 2246.96,2232.97,2221.38,2247.86],
  84.     ['2013/5/10', 2228.82,2246.83,2225.81,2247.67],
  85.     ['2013/5/13', 2247.68,2241.92,2231.36,2250.85],
  86.     ['2013/5/14', 2238.9,2217.01,2205.87,2239.93],
  87.     ['2013/5/15', 2217.09,2224.8,2213.58,2225.19],
  88.     ['2013/5/16', 2221.34,2251.81,2210.77,2252.87],
  89.     ['2013/5/17', 2249.81,2282.87,2248.41,2288.09],
  90.     ['2013/5/20', 2286.33,2299.99,2281.9,2309.39],
  91.     ['2013/5/21', 2297.11,2305.11,2290.12,2305.3],
  92.     ['2013/5/22', 2303.75,2302.4,2292.43,2314.18],
  93.     ['2013/5/23', 2293.81,2275.67,2274.1,2304.95],
  94.     ['2013/5/24', 2281.45,2288.53,2270.25,2292.59],
  95.     ['2013/5/27', 2286.66,2293.08,2283.94,2301.7],
  96.     ['2013/5/28', 2293.4,2321.32,2281.47,2322.1],
  97.     ['2013/5/29', 2323.54,2324.02,2321.17,2334.33],
  98.     ['2013/5/30', 2316.25,2317.75,2310.49,2325.72],
  99.     ['2013/5/31', 2320.74,2300.59,2299.37,2325.53],
  100.     ['2013/6/3', 2300.21,2299.25,2294.11,2313.43],
  101.     ['2013/6/4', 2297.1,2272.42,2264.76,2297.1],
  102.     ['2013/6/5', 2270.71,2270.93,2260.87,2276.86],
  103.     ['2013/6/6', 2264.43,2242.11,2240.07,2266.69],
  104.     ['2013/6/7', 2242.26,2210.9,2205.07,2250.63],
  105.     ['2013/6/13', 2190.1,2148.35,2126.22,2190.1]
  106. ]);
  107. function splitData(rawData) {
  108.     var categoryData = [];
  109.     var values = []
  110.     for (var i = 0; i < rawData.length; i++) {
  111.         categoryData.push(rawData[i].splice(0, 1)[0]);
  112.         values.push(rawData[i])
  113.     }
  114.     return {
  115.         categoryData: categoryData,
  116.         values: values
  117.     };
  118. }
  119. function calculateMA(dayCount) {
  120.     var result = [];
  121.     for (var i = 0, len = data0.values.length; i < len; i++) {
  122.         if (i < dayCount) {
  123.             result.push('-');
  124.             continue;
  125.         }
  126.         var sum = 0;
  127.         for (var j = 0; j < dayCount; j++) {
  128.             sum += data0.values[i - j][24];
  129.         }
  130.         result.push(sum / dayCount);
  131.     }
  132.     return result;
  133. }
  134. option = {
  135.     title: {
  136.         text: '上证指数',
  137.         left: 0
  138.     },
  139.     tooltip: {
  140.         trigger: 'axis',
  141.         axisPointer: {
  142.             type: 'line'
  143.         }
  144.     },
  145.     legend: {
  146.         data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
  147.     },
  148.     grid: {
  149.         left: '10%',
  150.         right: '10%',
  151.         bottom: '15%'
  152.     },
  153.     xAxis: {
  154.         type: 'category',
  155.         data: data0.categoryData,
  156.         scale: true,
  157.         boundaryGap : false,
  158.         axisLine: {onZero: false},
  159.         splitLine: {show: false},
  160.         splitNumber: 20,
  161.         min: 'dataMin',
  162.         max: 'dataMax'
  163.     },
  164.     yAxis: {
  165.         scale: true,
  166.         splitArea: {
  167.             show: true
  168.         }
  169.     },
  170.     dataZoom: [
  171.         {
  172.             type: 'inside',
  173.             start: 50,
  174.             end: 100
  175.         },
  176.         {
  177.             show: true,
  178.             type: 'slider',
  179.             y: '90%',
  180.             start: 50,
  181.             end: 100
  182.         }
  183.     ],
  184.     series: [
  185.         {
  186.             name: '日K',
  187.             type: 'candlestick',
  188.             data: data0.values,
  189.             markPoint: {
  190.                 label: {
  191.                     normal: {
  192.                         formatter: function (param) {
  193.                             return param != null ? Math.round(param.value) : '';
  194.                         }
  195.                     }
  196.                 },
  197.                 data: [
  198.                     {
  199.                         name: 'XX标点',
  200.                         coord: ['2013/5/31', 2300],
  201.                         value: 2300,
  202.                         itemStyle: {
  203.                             normal: {color: 'rgb(41,60,85)'}
  204.                         }
  205.                     },
  206.                     {
  207.                         name: 'highest value',
  208.                         type: 'max',
  209.                         valueDim: 'highest'
  210.                     },
  211.                     {
  212.                         name: 'lowest value',
  213.                         type: 'min',
  214.                         valueDim: 'lowest'
  215.                     },
  216.                     {
  217.                         name: 'average value on close',
  218.                         type: 'average',
  219.                         valueDim: 'close'
  220.                     }
  221.                 ],
  222.                 tooltip: {
  223.                     formatter: function (param) {
  224.                         return param.name + '<br>' + (param.data.coord || '');
  225.                     }
  226.                 }
  227.             },
  228.             markLine: {
  229.                 symbol: ['none', 'none'],
  230.                 data: [
  231.                     [
  232.                         {
  233.                             name: 'from lowest to highest',
  234.                             type: 'min',
  235.                             valueDim: 'lowest',
  236.                             symbol: 'circle',
  237.                             symbolSize: 10,
  238.                             label: {
  239.                                 normal: {show: false},
  240.                                 emphasis: {show: false}
  241.                             }
  242.                         },
  243.                         {
  244.                             type: 'max',
  245.                             valueDim: 'highest',
  246.                             symbol: 'circle',
  247.                             symbolSize: 10,
  248.                             label: {
  249.                                 normal: {show: false},
  250.                                 emphasis: {show: false}
  251.                             }
  252.                         }
  253.                     ],
  254.                     {
  255.                         name: 'min line on close',
  256.                         type: 'min',
  257.                         valueDim: 'close'
  258.                     },
  259.                     {
  260.                         name: 'max line on close',
  261.                         type: 'max',
  262.                         valueDim: 'close'
  263.                     }
  264.                 ]
  265.             }
  266.         },
  267.         {
  268.             name: 'MA5',
  269.             type: 'line',
  270.             data: calculateMA(5),
  271.             smooth: true,
  272.             lineStyle: {
  273.                 normal: {opacity: 0.5}
  274.             }
  275.         },
  276.         {
  277.             name: 'MA10',
  278.             type: 'line',
  279.             data: calculateMA(10),
  280.             smooth: true,
  281.             lineStyle: {
  282.                 normal: {opacity: 0.5}
  283.             }
  284.         },
  285.         {
  286.             name: 'MA20',
  287.             type: 'line',
  288.             data: calculateMA(20),
  289.             smooth: true,
  290.             lineStyle: {
  291.                 normal: {opacity: 0.5}
  292.             }
  293.         },
  294.         {
  295.             name: 'MA30',
  296.             type: 'line',
  297.             data: calculateMA(30),
  298.             smooth: true,
  299.             lineStyle: {
  300.                 normal: {opacity: 0.5}
  301.             }
  302.         },
  303.     ]
  304. };
  305. // 使用刚指定的配置项和数据显示图表。
  306. myChart.setOption(option);
  307. </script>
  308. </body>
  309. </html>

Echarts高级实用

image_1bge2iop7llg1g2lg6c6o01auj16.png-60.7kB
image_1bge2jnt31bsn1umi1a7o1bsgh6a1j.png-111.9kB

多个坐标系配合

代码
yaxis.html

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>ECharts</title>
  7.     <!-- 引入 echarts.js -->
  8.     <script src="../js/echarts.min.js"></script>
  9. </head>
  10. <body>
  11.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  12. <div id="main" style="width: 900px;height:600px;"></div>
  13. <script type="text/javascript">
  14.         // 基于准备好的dom，初始化echarts实例
  15. var myChart = echarts.init(document.getElementById('main'));
  16. // 指定图表的配置项和数据
  17. option = {
  18.     tooltip: {
  19.         trigger: 'axis'
  20.     },
  21.     toolbox: {
  22.         feature: {
  23.             dataView: {show: true, readOnly: false},
  24.             magicType: {show: true, type: ['line', 'bar']},
  25.             restore: {show: true},
  26.             saveAsImage: {show: true}
  27.         }
  28.     },
  29.     legend: {
  30.         data:['蒸发量','降水量','平均温度']
  31.     },
  32.     xAxis: [
  33.         {
  34.             type: 'category',
  35.             data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
  36.         }
  37.     ],
  38.     yAxis: [
  39.         {
  40.             type: 'value',
  41.             name: '水量',
  42.             min: 0,
  43.             max: 250,
  44.             interval: 50,
  45.             axisLabel: {
  46.                 formatter: '{value} ml'
  47.             }
  48.         },
  49.         {
  50.             type: 'value',
  51.             name: '温度',
  52.             min: 0,
  53.             max: 25,
  54.             interval: 5,
  55.             axisLabel: {
  56.                 formatter: '{value} °C'
  57.             }
  58.         }
  59.     ],
  60.     series: [
  61.         {
  62.             name:'蒸发量',
  63.             type:'bar',
  64.             data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
  65.         },
  66.         {
  67.             name:'降水量',
  68.             type:'bar',
  69.             data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
  70.         },
  71.         {
  72.             name:'平均温度',
  73.             type:'line',
  74.             yAxisIndex: 1,
  75.             data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
  76.         }
  77.     ]
  78. };
  79. // 使用刚指定的配置项和数据显示图表。
  80. myChart.setOption(option);
  81. </script>
  82. </body>
  83. </html>

区域缩放

image_1bge30jaujav1a8g6h918h11dr020.png-147kB

datazoom.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11. <div id="main" style="width: 900px;height:600px;"></div>
  12. <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. var base = +new Date(1968, 9, 3);
  16. var oneDay = 24 * 3600 * 1000;
  17. var date = [];
  18. var data = [Math.random() * 300];
  19. for (var i = 1; i < 20000; i++) {
  20.     var now = new Date(base += oneDay);
  21.     date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'));
  22.     data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
  23. }
  24. option = {
  25.     tooltip: {
  26.         trigger: 'axis',
  27.         position: function (pt) {
  28.             return [pt[0], '10%'];
  29.         }
  30.     },
  31.     title: {
  32.         left: 'center',
  33.         text: '大数据量折线图',
  34.     },
  35.     legend: {
  36.         top: 'bottom',
  37.         data:['意向']
  38.     },
  39.     toolbox: {
  40.         show: true,
  41.         feature: {
  42.             dataView: {show: true, readOnly: false},
  43.             magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
  44.             restore: {show: true},
  45.             saveAsImage: {show: true}
  46.         }
  47.     },
  48.     xAxis: {
  49.         type: 'category',
  50.         boundaryGap: false,
  51.         data: date
  52.     },
  53.     yAxis: {
  54.         type: 'value',
  55.         boundaryGap: [0, '100%']
  56.     },
  57.     dataZoom: [{
  58.         type: 'slider',
  59.         start: 10,
  60.         end: 40
  61.     }],
  62.     series: [
  63.         {
  64.             name:'模拟数据',
  65.             type:'line',
  66.             smooth:true,
  67.             symbol: 'none',
  68.             sampling: 'average',
  69.             itemStyle: {
  70.                 normal: {
  71.                     color: 'rgb(255, 70, 131)'
  72.                 }
  73.             },
  74.             areaStyle: {
  75.                 normal: {
  76.                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  77.                         offset: 0,
  78.                         color: 'rgb(255, 158, 68)'
  79.                     }, {
  80.                         offset: 1,
  81.                         color: 'rgb(255, 70, 131)'
  82.                     }])
  83.                 }
  84.             },
  85.             data: data
  86.         }
  87.     ]
  88. };
  89. // 使用刚指定的配置项和数据显示图表。
  90. myChart.setOption(option);
  91. </script>
  92. </body>
  93. </html>

值域漫游

image_1bge3n0uk1h5dn7v1pdenio7re2q.png-159.1kB
image_1bge3rmnn1la81ntqvo61f4egj437.png-114.7kB
datarange.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8.     <script src="../js/china.js"></script>
  9. </head>
  10. <body>
  11.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  12. <div id="main" style="width: 900px;height:600px;"></div>
  13. <script type="text/javascript">
  14.         // 基于准备好的dom，初始化echarts实例
  15. var myChart = echarts.init(document.getElementById('main'));
  16. // 指定图表的配置项和数据
  17. var geoCoordMap = {
  18.     "海门":[121.15,31.89],
  19.     "鄂尔多斯":[109.781327,39.608266],
  20.     "招远":[120.38,37.35],
  21.     "舟山":[122.207216,29.985295],
  22.     "齐齐哈尔":[123.97,47.33],
  23.     "盐城":[120.13,33.38],
  24.     "赤峰":[118.87,42.28],
  25.     "青岛":[120.33,36.07],
  26.     "乳山":[121.52,36.89],
  27.     "金昌":[102.188043,38.520089],
  28.     "泉州":[118.58,24.93],
  29.     "莱西":[120.53,36.86],
  30.     "日照":[119.46,35.42],
  31.     "胶南":[119.97,35.88],
  32.     "南通":[121.05,32.08],
  33.     "拉萨":[91.11,29.97],
  34.     "云浮":[112.02,22.93],
  35.     "梅州":[116.1,24.55],
  36.     "文登":[122.05,37.2],
  37.     "上海":[121.48,31.22],
  38.     "攀枝花":[101.718637,26.582347],
  39.     "威海":[122.1,37.5],
  40.     "承德":[117.93,40.97],
  41.     "厦门":[118.1,24.46],
  42.     "汕尾":[115.375279,22.786211],
  43.     "潮州":[116.63,23.68],
  44.     "丹东":[124.37,40.13],
  45.     "太仓":[121.1,31.45],
  46.     "曲靖":[103.79,25.51],
  47.     "烟台":[121.39,37.52],
  48.     "福州":[119.3,26.08],
  49.     "瓦房店":[121.979603,39.627114],
  50.     "即墨":[120.45,36.38],
  51.     "抚顺":[123.97,41.97],
  52.     "玉溪":[102.52,24.35],
  53.     "张家口":[114.87,40.82],
  54.     "阳泉":[113.57,37.85],
  55.     "莱州":[119.942327,37.177017],
  56.     "湖州":[120.1,30.86],
  57.     "汕头":[116.69,23.39],
  58.     "昆山":[120.95,31.39],
  59.     "宁波":[121.56,29.86],
  60.     "湛江":[110.359377,21.270708],
  61.     "揭阳":[116.35,23.55],
  62.     "荣成":[122.41,37.16],
  63.     "连云港":[119.16,34.59],
  64.     "葫芦岛":[120.836932,40.711052],
  65.     "常熟":[120.74,31.64],
  66.     "东莞":[113.75,23.04],
  67.     "河源":[114.68,23.73],
  68.     "淮安":[119.15,33.5],
  69.     "泰州":[119.9,32.49],
  70.     "南宁":[108.33,22.84],
  71.     "营口":[122.18,40.65],
  72.     "惠州":[114.4,23.09],
  73.     "江阴":[120.26,31.91],
  74.     "蓬莱":[120.75,37.8],
  75.     "韶关":[113.62,24.84],
  76.     "嘉峪关":[98.289152,39.77313],
  77.     "广州":[113.23,23.16],
  78.     "延安":[109.47,36.6],
  79.     "太原":[112.53,37.87],
  80.     "清远":[113.01,23.7],
  81.     "中山":[113.38,22.52],
  82.     "昆明":[102.73,25.04],
  83.     "寿光":[118.73,36.86],
  84.     "盘锦":[122.070714,41.119997],
  85.     "长治":[113.08,36.18],
  86.     "深圳":[114.07,22.62],
  87.     "珠海":[113.52,22.3],
  88.     "宿迁":[118.3,33.96],
  89.     "咸阳":[108.72,34.36],
  90.     "铜川":[109.11,35.09],
  91.     "平度":[119.97,36.77],
  92.     "佛山":[113.11,23.05],
  93.     "海口":[110.35,20.02],
  94.     "江门":[113.06,22.61],
  95.     "章丘":[117.53,36.72],
  96.     "肇庆":[112.44,23.05],
  97.     "大连":[121.62,38.92],
  98.     "临汾":[111.5,36.08],
  99.     "吴江":[120.63,31.16],
  100.     "石嘴山":[106.39,39.04],
  101.     "沈阳":[123.38,41.8],
  102.     "苏州":[120.62,31.32],
  103.     "茂名":[110.88,21.68],
  104.     "嘉兴":[120.76,30.77],
  105.     "长春":[125.35,43.88],
  106.     "胶州":[120.03336,36.264622],
  107.     "银川":[106.27,38.47],
  108.     "张家港":[120.555821,31.875428],
  109.     "三门峡":[111.19,34.76],
  110.     "锦州":[121.15,41.13],
  111.     "南昌":[115.89,28.68],
  112.     "柳州":[109.4,24.33],
  113.     "三亚":[109.511909,18.252847],
  114.     "自贡":[104.778442,29.33903],
  115.     "吉林":[126.57,43.87],
  116.     "阳江":[111.95,21.85],
  117.     "泸州":[105.39,28.91],
  118.     "西宁":[101.74,36.56],
  119.     "宜宾":[104.56,29.77],
  120.     "呼和浩特":[111.65,40.82],
  121.     "成都":[104.06,30.67],
  122.     "大同":[113.3,40.12],
  123.     "镇江":[119.44,32.2],
  124.     "桂林":[110.28,25.29],
  125.     "张家界":[110.479191,29.117096],
  126.     "宜兴":[119.82,31.36],
  127.     "北海":[109.12,21.49],
  128.     "西安":[108.95,34.27],
  129.     "金坛":[119.56,31.74],
  130.     "东营":[118.49,37.46],
  131.     "牡丹江":[129.58,44.6],
  132.     "遵义":[106.9,27.7],
  133.     "绍兴":[120.58,30.01],
  134.     "扬州":[119.42,32.39],
  135.     "常州":[119.95,31.79],
  136.     "潍坊":[119.1,36.62],
  137.     "重庆":[106.54,29.59],
  138.     "台州":[121.420757,28.656386],
  139.     "南京":[118.78,32.04],
  140.     "滨州":[118.03,37.36],
  141.     "贵阳":[106.71,26.57],
  142.     "无锡":[120.29,31.59],
  143.     "本溪":[123.73,41.3],
  144.     "克拉玛依":[84.77,45.59],
  145.     "渭南":[109.5,34.52],
  146.     "马鞍山":[118.48,31.56],
  147.     "宝鸡":[107.15,34.38],
  148.     "焦作":[113.21,35.24],
  149.     "句容":[119.16,31.95],
  150.     "北京":[116.46,39.92],
  151.     "徐州":[117.2,34.26],
  152.     "衡水":[115.72,37.72],
  153.     "包头":[110,40.58],
  154.     "绵阳":[104.73,31.48],
  155.     "乌鲁木齐":[87.68,43.77],
  156.     "枣庄":[117.57,34.86],
  157.     "杭州":[120.19,30.26],
  158.     "淄博":[118.05,36.78],
  159.     "鞍山":[122.85,41.12],
  160.     "溧阳":[119.48,31.43],
  161.     "库尔勒":[86.06,41.68],
  162.     "安阳":[114.35,36.1],
  163.     "开封":[114.35,34.79],
  164.     "济南":[117,36.65],
  165.     "德阳":[104.37,31.13],
  166.     "温州":[120.65,28.01],
  167.     "九江":[115.97,29.71],
  168.     "邯郸":[114.47,36.6],
  169.     "临安":[119.72,30.23],
  170.     "兰州":[103.73,36.03],
  171.     "沧州":[116.83,38.33],
  172.     "临沂":[118.35,35.05],
  173.     "南充":[106.110698,30.837793],
  174.     "天津":[117.2,39.13],
  175.     "富阳":[119.95,30.07],
  176.     "泰安":[117.13,36.18],
  177.     "诸暨":[120.23,29.71],
  178.     "郑州":[113.65,34.76],
  179.     "哈尔滨":[126.63,45.75],
  180.     "聊城":[115.97,36.45],
  181.     "芜湖":[118.38,31.33],
  182.     "唐山":[118.02,39.63],
  183.     "平顶山":[113.29,33.75],
  184.     "邢台":[114.48,37.05],
  185.     "德州":[116.29,37.45],
  186.     "济宁":[116.59,35.38],
  187.     "荆州":[112.239741,30.335165],
  188.     "宜昌":[111.3,30.7],
  189.     "义乌":[120.06,29.32],
  190.     "丽水":[119.92,28.45],
  191.     "洛阳":[112.44,34.7],
  192.     "秦皇岛":[119.57,39.95],
  193.     "株洲":[113.16,27.83],
  194.     "石家庄":[114.48,38.03],
  195.     "莱芜":[117.67,36.19],
  196.     "常德":[111.69,29.05],
  197.     "保定":[115.48,38.85],
  198.     "湘潭":[112.91,27.87],
  199.     "金华":[119.64,29.12],
  200.     "岳阳":[113.09,29.37],
  201.     "长沙":[113,28.21],
  202.     "衢州":[118.88,28.97],
  203.     "廊坊":[116.7,39.53],
  204.     "菏泽":[115.480656,35.23375],
  205.     "合肥":[117.27,31.86],
  206.     "武汉":[114.31,30.52],
  207.     "大庆":[125.03,46.58]
  208. };
  209. var convertData = function (data) {
  210.     var res = [];
  211.     for (var i = 0; i < data.length; i++) {
  212.         var geoCoord = geoCoordMap[data[i].name];
  213.         if (geoCoord) {
  214.             res.push({
  215.                 name: data[i].name,
  216.                 value: geoCoord.concat(data[i].value)
  217.             });
  218.         }
  219.     }
  220.     return res;
  221. };
  222. option = {
  223.     backgroundColor: '#404a59',
  224.     title: {
  225.         text: '全国主要城市空气质量',
  226.         subtext: 'data from PM25.in',
  227.         sublink: 'http://www.pm25.in',
  228.         x:'center',
  229.         textStyle: {
  230.             color: '#fff'
  231.         }
  232.     },
  233.     tooltip: {
  234.         trigger: 'item',
  235.         formatter: function (params) {
  236.             return params.name + ' : ' + params.value[2];
  237.         }
  238.     },
  239.     legend: {
  240.         orient: 'vertical',
  241.         y: 'bottom',
  242.         x:'right',
  243.         data:['pm2.5'],
  244.         textStyle: {
  245.             color: '#fff'
  246.         }
  247.     },
  248.     dataRange: {
  249.         min: 0,
  250.         max: 200,
  251.         calculable: true,
  252.         color: ['#d94e5d','#eac736','#50a3ba'],
  253.         textStyle: {
  254.             color: '#fff'
  255.         }
  256.     },
  257.     geo: {
  258.         map: 'china',
  259.         label: {
  260.             emphasis: {
  261.                 show: false
  262.             }
  263.         },
  264.         itemStyle: {
  265.             normal: {
  266.                 areaColor: '#323c48',
  267.                 borderColor: '#111'
  268.             },
  269.             emphasis: {
  270.                 areaColor: '#2a333d'
  271.             }
  272.         }
  273.     },
  274.     series: [
  275.         {
  276.             name: 'pm2.5',
  277.             type: 'scatter',
  278.             coordinateSystem: 'geo',
  279.             data: convertData([
  280.                 {name: "海门", value: 9},
  281.                 {name: "鄂尔多斯", value: 12},
  282.                 {name: "招远", value: 12},
  283.                 {name: "舟山", value: 12},
  284.                 {name: "齐齐哈尔", value: 14},
  285.                 {name: "盐城", value: 15},
  286.                 {name: "赤峰", value: 16},
  287.                 {name: "青岛", value: 18},
  288.                 {name: "乳山", value: 18},
  289.                 {name: "金昌", value: 19},
  290.                 {name: "泉州", value: 21},
  291.                 {name: "莱西", value: 21},
  292.                 {name: "日照", value: 21},
  293.                 {name: "胶南", value: 22},
  294.                 {name: "南通", value: 23},
  295.                 {name: "拉萨", value: 24},
  296.                 {name: "云浮", value: 24},
  297.                 {name: "梅州", value: 25},
  298.                 {name: "文登", value: 25},
  299.                 {name: "上海", value: 25},
  300.                 {name: "攀枝花", value: 25},
  301.                 {name: "威海", value: 25},
  302.                 {name: "承德", value: 25},
  303.                 {name: "厦门", value: 26},
  304.                 {name: "汕尾", value: 26},
  305.                 {name: "潮州", value: 26},
  306.                 {name: "丹东", value: 27},
  307.                 {name: "太仓", value: 27},
  308.                 {name: "曲靖", value: 27},
  309.                 {name: "烟台", value: 28},
  310.                 {name: "福州", value: 29},
  311.                 {name: "瓦房店", value: 30},
  312.                 {name: "即墨", value: 30},
  313.                 {name: "抚顺", value: 31},
  314.                 {name: "玉溪", value: 31},
  315.                 {name: "张家口", value: 31},
  316.                 {name: "阳泉", value: 31},
  317.                 {name: "莱州", value: 32},
  318.                 {name: "湖州", value: 32},
  319.                 {name: "汕头", value: 32},
  320.                 {name: "昆山", value: 33},
  321.                 {name: "宁波", value: 33},
  322.                 {name: "湛江", value: 33},
  323.                 {name: "揭阳", value: 34},
  324.                 {name: "荣成", value: 34},
  325.                 {name: "连云港", value: 35},
  326.                 {name: "葫芦岛", value: 35},
  327.                 {name: "常熟", value: 36},
  328.                 {name: "东莞", value: 36},
  329.                 {name: "河源", value: 36},
  330.                 {name: "淮安", value: 36},
  331.                 {name: "泰州", value: 36},
  332.                 {name: "南宁", value: 37},
  333.                 {name: "营口", value: 37},
  334.                 {name: "惠州", value: 37},
  335.                 {name: "江阴", value: 37},
  336.                 {name: "蓬莱", value: 37},
  337.                 {name: "韶关", value: 38},
  338.                 {name: "嘉峪关", value: 38},
  339.                 {name: "广州", value: 38},
  340.                 {name: "延安", value: 38},
  341.                 {name: "太原", value: 39},
  342.                 {name: "清远", value: 39},
  343.                 {name: "中山", value: 39},
  344.                 {name: "昆明", value: 39},
  345.                 {name: "寿光", value: 40},
  346.                 {name: "盘锦", value: 40},
  347.                 {name: "长治", value: 41},
  348.                 {name: "深圳", value: 41},
  349.                 {name: "珠海", value: 42},
  350.                 {name: "宿迁", value: 43},
  351.                 {name: "咸阳", value: 43},
  352.                 {name: "铜川", value: 44},
  353.                 {name: "平度", value: 44},
  354.                 {name: "佛山", value: 44},
  355.                 {name: "海口", value: 44},
  356.                 {name: "江门", value: 45},
  357.                 {name: "章丘", value: 45},
  358.                 {name: "肇庆", value: 46},
  359.                 {name: "大连", value: 47},
  360.                 {name: "临汾", value: 47},
  361.                 {name: "吴江", value: 47},
  362.                 {name: "石嘴山", value: 49},
  363.                 {name: "沈阳", value: 50},
  364.                 {name: "苏州", value: 50},
  365.                 {name: "茂名", value: 50},
  366.                 {name: "嘉兴", value: 51},
  367.                 {name: "长春", value: 51},
  368.                 {name: "胶州", value: 52},
  369.                 {name: "银川", value: 52},
  370.                 {name: "张家港", value: 52},
  371.                 {name: "三门峡", value: 53},
  372.                 {name: "锦州", value: 54},
  373.                 {name: "南昌", value: 54},
  374.                 {name: "柳州", value: 54},
  375.                 {name: "三亚", value: 54},
  376.                 {name: "自贡", value: 56},
  377.                 {name: "吉林", value: 56},
  378.                 {name: "阳江", value: 57},
  379.                 {name: "泸州", value: 57},
  380.                 {name: "西宁", value: 57},
  381.                 {name: "宜宾", value: 58},
  382.                 {name: "呼和浩特", value: 58},
  383.                 {name: "成都", value: 58},
  384.                 {name: "大同", value: 58},
  385.                 {name: "镇江", value: 59},
  386.                 {name: "桂林", value: 59},
  387.                 {name: "张家界", value: 59},
  388.                 {name: "宜兴", value: 59},
  389.                 {name: "北海", value: 60},
  390.                 {name: "西安", value: 61},
  391.                 {name: "金坛", value: 62},
  392.                 {name: "东营", value: 62},
  393.                 {name: "牡丹江", value: 63},
  394.                 {name: "遵义", value: 63},
  395.                 {name: "绍兴", value: 63},
  396.                 {name: "扬州", value: 64},
  397.                 {name: "常州", value: 64},
  398.                 {name: "潍坊", value: 65},
  399.                 {name: "重庆", value: 66},
  400.                 {name: "台州", value: 67},
  401.                 {name: "南京", value: 67},
  402.                 {name: "滨州", value: 70},
  403.                 {name: "贵阳", value: 71},
  404.                 {name: "无锡", value: 71},
  405.                 {name: "本溪", value: 71},
  406.                 {name: "克拉玛依", value: 72},
  407.                 {name: "渭南", value: 72},
  408.                 {name: "马鞍山", value: 72},
  409.                 {name: "宝鸡", value: 72},
  410.                 {name: "焦作", value: 75},
  411.                 {name: "句容", value: 75},
  412.                 {name: "北京", value: 79},
  413.                 {name: "徐州", value: 79},
  414.                 {name: "衡水", value: 80},
  415.                 {name: "包头", value: 80},
  416.                 {name: "绵阳", value: 80},
  417.                 {name: "乌鲁木齐", value: 84},
  418.                 {name: "枣庄", value: 84},
  419.                 {name: "杭州", value: 84},
  420.                 {name: "淄博", value: 85},
  421.                 {name: "鞍山", value: 86},
  422.                 {name: "溧阳", value: 86},
  423.                 {name: "库尔勒", value: 86},
  424.                 {name: "安阳", value: 90},
  425.                 {name: "开封", value: 90},
  426.                 {name: "济南", value: 92},
  427.                 {name: "德阳", value: 93},
  428.                 {name: "温州", value: 95},
  429.                 {name: "九江", value: 96},
  430.                 {name: "邯郸", value: 98},
  431.                 {name: "临安", value: 99},
  432.                 {name: "兰州", value: 99},
  433.                 {name: "沧州", value: 100},
  434.                 {name: "临沂", value: 103},
  435.                 {name: "南充", value: 104},
  436.                 {name: "天津", value: 105},
  437.                 {name: "富阳", value: 106},
  438.                 {name: "泰安", value: 112},
  439.                 {name: "诸暨", value: 112},
  440.                 {name: "郑州", value: 113},
  441.                 {name: "哈尔滨", value: 114},
  442.                 {name: "聊城", value: 116},
  443.                 {name: "芜湖", value: 117},
  444.                 {name: "唐山", value: 119},
  445.                 {name: "平顶山", value: 119},
  446.                 {name: "邢台", value: 119},
  447.                 {name: "德州", value: 120},
  448.                 {name: "济宁", value: 120},
  449.                 {name: "荆州", value: 127},
  450.                 {name: "宜昌", value: 130},
  451.                 {name: "义乌", value: 132},
  452.                 {name: "丽水", value: 133},
  453.                 {name: "洛阳", value: 134},
  454.                 {name: "秦皇岛", value: 136},
  455.                 {name: "株洲", value: 143},
  456.                 {name: "石家庄", value: 147},
  457.                 {name: "莱芜", value: 148},
  458.                 {name: "常德", value: 152},
  459.                 {name: "保定", value: 153},
  460.                 {name: "湘潭", value: 154},
  461.                 {name: "金华", value: 157},
  462.                 {name: "岳阳", value: 169},
  463.                 {name: "长沙", value: 175},
  464.                 {name: "衢州", value: 177},
  465.                 {name: "廊坊", value: 193},
  466.                 {name: "菏泽", value: 194},
  467.                 {name: "合肥", value: 229},
  468.                 {name: "武汉", value: 273},
  469.                 {name: "大庆", value: 279}
  470.             ]),
  471.             symbolSize: 12,
  472.             label: {
  473.                 normal: {
  474.                     show: false
  475.                 },
  476.                 emphasis: {
  477.                     show: false
  478.                 }
  479.             },
  480.             itemStyle: {
  481.                 emphasis: {
  482.                     borderColor: '#fff',
  483.                     borderWidth: 1
  484.                 }
  485.             }
  486.         }
  487.     ]
  488. }
  489. // 使用刚指定的配置项和数据显示图表。
  490. myChart.setOption(option);
  491. </script>
  492. </body>
  493. </html>

项目

定制主题

image_1bge48lkn1bqr1hoq7uo1tcm1md33k.png-158.7kB
image_1bge4bp761gne299ob1m1l1dfg41.png-303.9kB
theme.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>line</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="../js/echarts.min.js"></script>
  8.     <script src='../js/dark.js'></script>
  9. </head>
  10. <body>
  11.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  12. <div id="main" style="width: 900px;height:600px;"></div>
  13. <script type="text/javascript">
  14.         // 基于准备好的dom，初始化echarts实例
  15. var myChart = echarts.init(document.getElementById('main'),'dark');
  16. // 指定图表的配置项和数据
  17. var option = {
  18.     title: {
  19.         text: 'ECharts 入门示例'
  20.     },
  21.     toolbox: {
  22.         show: true,
  23.         feature: {
  24.             saveAsImage: {
  25.                 show: true
  26.             }
  27.         }
  28.     },
  29.     legend: {
  30.         data: ['销量']
  31.     },
  32.     xAxis: {
  33.         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  34.     },
  35.     yAxis: {},
  36.     series: [{
  37.         name: '销量',
  38.         type: 'bar',
  39.         data: [5, 20, 36, 10, 10, 20]
  40.     },{
  41.         name: '产量',
  42.         type: 'line',
  43.         data: [7, 30, 50, 11, 40, 80]
  44.     }]
  45. };
  46. // 使用刚指定的配置项和数据显示图表。
  47. myChart.setOption(option);
  48. </script>
  49. </body>
  50. </html>

地图标记

image_1bge4mdusj2115io19o1drc18244e.png-147.5kB
image_1bge4oluh1dukjh7sak1g6me14r.png-113kB
image_1bge4qntrpo91s221ap15llrmr58.png-61.9kB
image_1bge4ss3h9171e5f11ch10sb1b3p5l.png-74.7kB
image_1bge511v914lm6s01uas16s51f1d62.png-178.8kB
image_1bge52fmkos5o5119ke1hg6bmj6f.png-255.9kB

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注