ECharts图表开发说明

ECharts介绍

本次开发依赖于第三方插件—ECharts(一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器 (IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视 化图表。)

具体使用方法

1.下载需引用的js

从官网 http://echarts.baidu.com/download.html 下载界面选择你需要的版本下载,有精简版，常用版，还有完整版，还可以根据自己的项目需要自定义选择下载，具体详情见官网，本次在iuap mobile平台上绑定的是精简版本，仅包含基础图表。

2.引用js

引入Echart.js，只需要像普通的 JavaScript 库一样用 script 标签引入

  1. <!DOCTYPE html>
  2. <html>
  3. <header>
  4.     <meta charset="utf-8">
  5.     <!-- 引入 ECharts 文件 -->
  6.     <script src="echarts.min.js"></script>
  7. </header>
  8. </html>

3.在html中定义图表区域

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。如下

  1. <body>
  2. <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  3. <div id="main" style="width: 600px;height:400px;"></div>
  4. </body>

4.初始化echart

在js中基于准备好的dom通过 echarts.init 方法,初始化一个 echarts 实例,并通过 setOption 方法生成一个图表

  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: 600px;height:400px;"></div>
  12. <script type="text/javascript">
  13.     // 基于准备好的dom，初始化echarts实例
  14.     var myChart = echarts.init(document.getElementById('main'));
  15.     // 指定图表的配置项和数据
  16.     var option = {
  17.     };
  18.     // 使用刚指定的配置项和数据显示图表。
  19.     myChart.setOption(option);
  20. </script>
  21. </body>
  22. </html>

5.配置图表数据

其中option包含图表的配置项和数据，里面会定义很多配置项，官网也有较为详细的说明，若想了解的更为全面和具体可参考官网配置项手册 http://echarts.baidu.com/option.html#title 本次就以iuap mobile图表控件的折线图表里面的option做详细说明

  1. var option={
  2. title:{                             //图表名字，可以定义位置，内容
  3.     text:"2016年8月相关数据统计",
  4.     x:"center",
  5.     y:10
  6. },
  7. legend:{                         //图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
  8.     data: ["新增用户", "活跃用户", "新增vip用户", "活跃vip用户"],
  9.     x:'center',
  10.     y:'450',
  11.     itemGap: 10, //legend元素间隔
  12.     itemWidth: 60, //图标宽度
  13.     itemHeight: 20, //图标高度
  14.     textStyle: {
  15.         color: 'auto',
  16.         fontSize: 14
  17.     }        
  18. },
  19. tooltip: {            // 气泡提示配置
  20.     trigger: 'item'   // 触发类型，默认数据触发，可选为：'axis'
  21. },
  22.  xAxis: [{             //x坐标轴内容设置
  23.         type: 'category',
  24.         boundaryGap: true, //两边留出空白策略
  25.     axisLine: {        //坐标线
  26.         lineStyle: {        
  27.             color: '#464646',
  28.             width: 2
  29.         }
  30.     }, 
  31.     axisLabel: {     //x、y坐标轴数据显示风格设置
  32.         interval: 'auto',
  33.         rotate:  -45,    //x轴文字旋转角度
  34.         clickable: true, 
  35.             textStyle: {
  36.                 color: '#767676',
  37.                 fontSize: 16
  38.             }
  39.     },
  40.     axisTick: {           //坐标刻度设置
  41.         interval: 'auto',
  42.         onGap: false
  43.     },
  44.     splitLine: { //分割线
  45.         show: true,
  46.         onGap: false,
  47.         lineStyle: {
  48.             type: 'dashed'
  49.         }
  50.     },
  51.         data: ['8-1', '8-2', '8-3', '8-4', '8-5', '8-6', '8-7']   //x轴刻度数据
  52.     }],
  53.     yAxis: [{                             //y坐标轴设置
  54.         type: 'value',
  55.         name: '(万)',
  56.         nameTextStyle:{
  57.             align: 'right',
  58.             fontSize: 16
  59.         },
  60.     axisLine: {              //y坐标轴轴线颜色粗细设置
  61.         lineStyle: {
  62.             color: '#333',
  63.             width: 2
  64.         }
  65.     }, 
  66.     axisLabel: {         //y坐标轴分度值字体设置
  67.             textStyle: {
  68.                 color: '#333',
  69.                 fontSize: 14
  70.             }
  71.     },
  72.     splitLine: {   // y轴分割线设置
  73.         show: true,
  74.         onGap: false,
  75.         lineStyle: {
  76.             type: 'dashed'
  77.         }
  78.     },
  79.     splitNumber: 10
  80.     }],
  81.     grid: { //控制坐标的四周间距（距离绘制好的dom边界距离）
  82.         x: 60,
  83.         y: 70,
  84.         x2: 40,
  85.         y2: 100
  86.     },
  87.    series: [{                    //配置4条折线数据
  88.         name: '新增用户',type: 'line',symbol: 'emptyCircle',symbolSize: 4,
  89.         itemStyle: {
  90.         normal: {
  91.             lineStyle:{
  92.                 width: 3
  93.             }    
  94.         }
  95.         },
  96.         data:[50, 234, 450, 580, 760,780,900]  
  97.     },{
  98.         name: '活跃用户',type: 'line',symbol: 'emptyCircle',symbolSize: 4,
  99.         itemStyle: {
  100.             normal: {
  101.                 lineStyle:{
  102.                     width: 3
  103.                 }    
  104.             }
  105.         },
  106.         data: [10, 160, 346, 370, 420,470,530]
  107.     },{
  108.         name: '新增vip用户',type: 'line',symbol: 'emptyCircle',symbolSize: 4,
  109.         itemStyle: {
  110.             normal: {
  111.                 lineStyle:{
  112.                     width: 3
  113.                 }
  114.             }
  115.         },
  116.         data: [2, 40, 50, 130, 210,200,149]
  117.     },{
  118.         name: '活跃vip用户',type: 'line',symbol: 'emptyCircle',symbolSize: 4,
  119.         itemStyle: {
  120.             normal: {
  121.                 lineStyle:{
  122.                     width: 3
  123.                 }
  124.             }
  125.         },
  126.         data: [10, 30, 38, 120, 310,380,680]
  127.     }]
  128. };

6.绑定事件

配置完成后图表就能渲染出来了，除此以外，Echart还可以绑定事件和行为，具体可参考官网： http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA 下面以图表的每一个配置数据绑定一个点击事件为例，如下：

  1. myChart.on('click', function (params) {
  2. // 控制台打印数据的名称
  3. console.log(params.name);
  4. });
文档更新时间: 2018-06-06 13:54