echarts多种图形使用

echarts 图形使用分享，写得不好，请各位大神多多指教…

• 饼图 pie
• 折线图 line
• 柱形图 bar

1. 根据条件（季度，月份）联动三种图形数据变化
2. 折线图 “月份” 换行处理方法
3. 柱状图 添加 “横向滚动条”
4. 封装图形函数
5. 使用指南

效果图1：

效果图2：

参数说明及数据格式

  /** 
    * 创建饼图js
    * data[0] 呈现饼图的dom元素id
    * data[1] 统计图的主标题
    * data[2] 图例
    * data[3] 自定义名字
    * data[4] 呈现的统计图数据
    * @param data
    * ["pieArea","活动2情况统计图",["活动1","活动2","活动3"],"活动详情",
    * [{"value":"5","name":"活动1"},{"value":"3","name":"活动2"},{"value":"8","name":"活动3"}]]
    *
    */

饼图封装方法

/****************饼图封装方法********************/
function createPie(data) {
	// 为了复用性，在外面初始化
    var myChart = echarts.init(document.getElementById(data[0]));
    var option = {
        title: {
            text: data[1],
            subtext: '',
            x: 'center',
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}:{c} ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            data: data[2],
            top: 50
        },
        toolbox: {
            show: false,
            feature: {
                mark: false,
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar', 'pie', 'gauge']
                },
                restore: true
            }
        },
        calculable: true,

        //   formatter: '{b}:{c}人 ({d}%)'
        series: [{
            name: data[3],
            type: "pie",
            radius: '50%',
            center: ['50%', '50%'],
            data: data[4],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        formatter: '{c}人'
                    }
                },
                labelLine: {
                    label: {
                        show: true
                    }
                },
                emphasis: {
                    shadowBlur: 50,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    return option;
}

折线图封装方法

• 需注意：
• axisLabel换行（在本文章对 “时间格式处理”），为了方便，【我这里直接写在函数中，朋友们可自行抽离】
• 代码段在var option={};之后，在myChart.setOption(option);之前

 /**************************折线图*******************/
function createLine(data) {
    option = {
        title: {
            text: data[1],
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
         //    data: data[2]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {

        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: { //坐标轴刻度标签的相关设置。
                interval: 0,
                rotate: "45"
            },
            data: data[2]
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name:'心血管随访数',
            type: 'line',
            data: data[3]
        }]
    };

    /**
     * 使用方式一（动态）： 处理  axisLabel换行
     * 代码段在var option={};之后，在myChart.setOption(option);之前
     */
    option.xAxis.axisLabel = {
        interval: 0, //标签设置为全部显示
        formatter: function (params) {
            //粘贴以下function内未注释的代码
            var newParamsName = ""; // 最终拼接成的字符串
            var paramsNameNumber = params.length; // 实际标签的个数
            var provideNumber = 5; // 每行能显示的字的个数
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
            // 条件等同于rowNumber>1
            if (paramsNameNumber > provideNumber) {

                for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ""; // 表示每一次截取的字符串
                    var start = p * provideNumber; // 开始截取的位置
                    var end = start + provideNumber; // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                        // 最后一次不换行
                        tempStr = params.substring(start, paramsNameNumber);
                    } else {
                        // 每一次拼接字符串并换行
                        tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr; // 最终拼成的字符串
                }

            } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
            }
            //将最终的字符串返回
            return newParamsName
        }
    }
    return option;
}

柱状图封装方法

  /***********************柱状图*************************/
function createBar(data) {
   // 指定图表的配置项和数据
   option = {
       title: {
           text: data[1],
           left: "center"
       },
       tooltip: {
           trigger: 'axis',
           axisPointer: {
               crossStyle: {
                   color: '#999'
               }
           }
       },
       // 设置x轴滚动条
       dataZoom: [{
           type: 'slider',
           show: true,
           xAxisIndex: [0],
           left: '9%',
           bottom: -5,
           start: 10,
           end: 90 //初始化滚动条
       }],
       toolbox: {

       },
       xAxis: [{
           type: 'category',
           data: data[2],
           axisPointer: {
               type: 'shadow'
           }
       }],
       yAxis: [{
           type: 'value',
           name: '人数',
           min: 0,
           interval: 5000,

       }],
       series: [{
               name: '常住人口数',
               type: 'bar',
               data: data[3]
           },
           {
               name: '心血管档案管理数',
               type: 'bar',
               data: data[4]
           }
       ]
   };
   return option;
}

使用指南

• 1.静态html
• 2.初始化echarts 获取Dom元素
• 3.判断传入图形类型： pie饼图 line拆线图 bar柱状图
• 4.根据图形调用封装方法
• 5.测试根据条件数据联动

1. 静态html

<!-- 数据统计 -->
<div id="statisticsTitle">
   <h2>xxx医院心血管数据统计</h2>
   <ul>
       <!-- 年份 -->
       <li>
           <label class="input-txt-warp">
                   <span>年&nbsp;份</span>
                   <span class="input-select" style="width:100px">
                       <select>
                           <option value ="1">2017年</option>
                           <option value ="2">2018年</option>
                       </select>
                   </span>
               </label>
       </li>
       <!-- 季度 -->
       <li>
           <label class="input-txt-warp">
                   <span>季&nbsp;度</span>
                   <span class="input-select" style="width:100px">
                       <select id="quarterOption">
                           <option value="0">全部</option>
                           <option value="1">第一季度</option>
                           <option value="2">第二季度</option>
                           <option value="3">第三季度</option>
                           <option value="4">第四季度</option>
                       </select>
                   </span>
               </label>
       </li>
       <!-- 月份 -->
       <li>
           <label class="input-txt-warp">
                   <span>月&nbsp;份</span>
                   <span class="input-select" style="width:100px">
                       <select>
                           <option value="0">全部</option>
                           <option value ="1">1月</option>
                           <option value ="2">2月</option>
                           <option value ="3">3月</option>
                           <option value ="4">4月</option>
                           <option value ="5">5月</option>
                           <option value ="6">6月</option>
                           <option value ="7">7月</option>
                           <option value ="8">8月</option>
                           <option value ="9">9月</option>
                           <option value ="10">10月</option>
                           <option value ="11">11月</option>
                           <option value ="12">12月</option>
                       </select>
                   </span>
               </label>
       </li>

       <!-- 查询按钮 -->
       <div>
           <a href="#" class="easyui-linkbutton c3" data-options="iconCls:'icon-search'" style="width: 60px;">查询</a>
       </div>
   </ul>
</div>


<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="graphWrap">
    <div class="clearfix">
        <div id="pies" style="width: 280px;height:380px;"></div>
        <div id="lines" style="width: 600px;height:320px"></div>
    </div>
    <div id="grapBars">
        <div id="bars" style="width: 1000px;height:350px;"></div>
    </div>
</div>

2. 初始化echarts 获取Dom元素

// 基于准备好的dom，初始化echarts实例
var myChartPie = echarts.init(document.getElementById('pies'));
var myChartLine = echarts.init(document.getElementById('lines')); //拆线图
var myChartBar = echarts.init(document.getElementById('bars')) //柱状图

3. 判断传入图形类型：

• type== 1 pie饼图
• type == 2 line拆线图
• type == 3 bar柱状图

function optionType(data, type) {
    if (type == 1) {
        return createPie(data);
    } else if (type == 2) {
        return createLine(data);
    } else {
        return createBar(data);
    }
}

/**
* 更新图形数据方法
* @param {*} data 数据
* @param {*} graph 图形： pie饼图  line拆线图  bar柱状图
*/

function updateGraphData(data, graph) {
    if (graph == 1) {
        myChartPie.setOption(optionType(data, graph));
    } else if (graph == 2) {
        myChartLine.setOption(optionType(data, graph));
    }else{
        myChartBar.setOption(optionType(data, graph));
    }
}

4. 调用方法

调用 饼图方法

// 调用 饼图   使用指定的配置项和数据显示图表
  myChartPie.setOption(optionType(["pies", "心血管档案管理率", ["全部", "已完成", "未完成"], "心血管档案管理率", [{
      "value": "5",
      "name": "全部"
  }, {
      "value": "3",
      "name": "已完成"
  }, {
      "value": "18",
      "name": "未完成"
  }]], 1));

调用 折线图方法

//调用  折线图  指定的配置项和数据显示图表
myChartLine.setOption(optionType(["",
    "心血管随访数",
    ['2017年01月', '2017年02月', '2017年03月', '2017年04月', '2017年05月', '2017年06月', '2017年07月',
        '2017年08月', '2017年09月', '2017年10月', '2017年11月', '2017年12月'
    ],
    [120, 132, 101, 12, 90, 230, 210, 82, 63, 120, 56, 78]
], 2))

调用 柱状图方法

// 调用 柱状图  指定的配置项和数据显示图表
  myChartBar.setOption(optionType(["",
      "管辖内心血管人数", ['道里区1', '南岗区', '道里区14', '道里区1', '道里区5', '道里', '道里7月', '道里8月',
          '道里9月', '道里10月', '道里11月', '道里12月', '道里区10', '道里区10', '道里区50',
      ],
      [444, 7878, 7570, 253.2, 2455.6, 765.7, 135.6, 16244.2, 342.6, 204.0, 6.4, 355.3],
      [2444.6, 5444.9, 9555.0, 2556.4, 2558.7, 7550.7, 175.6, 182.2, 484.7, 184.8, 655.0,
          2474.3,
          655.0, 2474.3, 5666
      ],

  ], 3))

5. 在html页面中 测试根据条件数据联动

<script>
   /***************************心血管数据统计测试数据************************/

	// 注册changes事件   当改变下拉框获取对应值
	$(function () {
	    $("#quarterOption").change(function () {
	        alert("点击我了");
	        // 保存当前值
	        var optionVal = $(this).val();
	        
	        //根据　季度更新值
	        if (optionVal == 1) {
	
	            // 更新 饼图
	            var optionPie = [
	                "pies", "心血管档案管理率", ["全年", "已完成", "未完成"], "心血管档案管理率", [{
	                    "value": "15",
	                    "name": "全年"
	                }, {
	                    "value": "30",
	                    "name": "已完成"
	                }, {
	                    "value": "8",
	                    "name": "未完成"
	                }]
	            ]
	
	
	            // 更新  折线图值
	            var optionLine = ["",
	                "心血管随访数", ['2017年01月', '2017年02月', '2017年03月', '2017年04月', '2017年05月',
	                    '2017年06月',
	                    '2017年07月',
	                    '2017年08月', '2017年09月', '2017年10月', '2017年11月', '2017年12月'
	                ],
	                [50, 132, 101, 165, 90, 130, 210, 282, 63, 285, 156, 78]
	            ]
	
	            // 更新 柱状图
	            var optionBar = ["",
	                "管辖内心血管人数", ['道里区1', '南岗区', '道里区14', '道里区1', '道里区5', '道里',
	                    '道里7月', '道里8月', '道里9月', '道里10月', '道里11月', '道里12月', '道里区10', '道里区10',
	                    '道里区50',
	                ],
	                [144, 999, 6842, 253.2, 2455.6, 765.7, 135.6, 1644.2,
	                    5214.6,
	                    204.0, 956, 355.3
	                ],
	                [444.6, 444.9, 9555.0, 2556.4, 2558.7, 7550.7, 175.6, 182.2,
	                    484.7, 184.8, 655.0, 2474.3,
	                    655.0, 2474.3, 5666
	                ]
	
	            ]

	            // 调用方法  更新图形数据
	            updateGraphData(optionPie, 1);
	            updateGraphData(optionLine, 2);
	            updateGraphData(optionBar, 3);
	            
	        } else if (optionVal == 2) {
	            // 更新  折线图值
	            var optionLine = ["",
	                "心血管随访数", ['2017年01月', '2017年02月', '2017年03月', '2017年04月', '2017年05月',
	                    '2017年06月',
	                    '2017年07月',
	                    '2017年08月', '2017年09月', '2017年10月', '2017年11月', '2017年12月'
	                ],
	                [150, 132, 201, 165, 190, 130, 210, 282, 63, 385, 156, 178]
	            ]
	
	            // 调用方法  更新图形数据
	            updateGraphData(optionLine, 2);
	        }
	    });
	});
</script>