前端-echarts的使用

echarts作为图表展示中，使用最流行之一，作为一个全栈开发工程师来说也是必要掌握的。对其的详细使用，这里不做过多累述，毕竟官网的介绍更为详细，也更为直观。

---

在应用中，主要掌握两点：

1. 对 option 的设置；
2. 对初始化的设置。

简单使用示例：

• 获取option

    /**
     * 获取单个折现/柱状图的option
     * @param data 数据数组
     * @param title 标题
     * @param name 图例名称
     * @param unit y轴单位
     * @param type 图标类型
     */
    function getSingleOption(data, title, name, unit, type){
        var b = true;
        if(type == 'line'){
            b = false;
        }
       
        var option = {
            title : {
                text: title,// 标题
                subtext: '', // 副标题
                textStyle: { //自定义样式
                    fontWeight: 'normal',  // 粗细
                    color: '#333' //标题颜色
                }},
            tooltip : {trigger: 'axis'},
            color: getColor(n), // 获取颜色，也可以不填使用默认的
            legend: {
                data:names // 图列
                },
            toolbox: { // 工具栏
                show: true, feature: {
                    mark: {show: true},
                    dataView: {show: false, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['line', 'bar']},
                    restore: {show: false}, 
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis : [{type : 'category', boundaryGap : b,
                data : names // x坐标 
                }],
            yAxis : [{name:unit ,type : 'value',
                axisLabel : {
                    formatter: '{value} '
                }}],
            series : [{name:name, type:type,
                data: data,
                markPoint : {data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}]},
                markLine : {data : [
                        {type : 'average', name: '平均值'}]}}]
        };
        if(type == 'bar'){
            option.series[0].markLine = null;
        }
        return option;
    }

• 获取随机颜色： 

 /**
     * 获取颜色数组
     * @param n ：数组个数
     */
    function getRoundColor(n){
        var colors = [];
        for(var x=0 ; x<n;x++){
            // 这种是获取随机颜色，不建议这样，有时会生成展示效果不好的颜色，用户体验不好
         var color = "#";
            for(var i = 0; i < 6; i++){
                var ran = Math.round(Math.random()*15);
                if(ran < 10){
                    color += ran;
                }else if(ran == 10){
                    color += 'A';
                }else if(ran == 11){
                    color += 'B';
                }else if(ran == 12){
                    color += 'C';
                }else if(ran == 13){
                    color += 'D';
                }else if(ran == 14){
                    color += 'E';
                }else if(ran == 15){
                    color += 'F';
                }
            }
            colors.push(color);
        }
        return colors ;
    }

• 获取颜色：

 /**
     * 生成随机颜色
     * @return {string}
     */
// 先准备一个较大的数组，在从中随机获取，这样显示不会出现不好的颜色
    var colors = ["#36A7D5","#05BCF1","#7B68EE","#B875F2","#9C4B5C","#4E887D","#4876FF","#11CBA5","#93D470","#F077AC"];
    function getRanColor(n){
        var colorList = [];
        for(var x=0 ; x<n ;x++){
            var color= colors[Math.round(Math.random()*10)];
            colorList.push(color);
        }
        return colorList;
    }

• 初始化

var left1 = echarts.init(document.getElementById('left1'));
 left1.setOption(getSingleOption(data, '收益情况', '收益', '万元', 'line'));
$(document).ready(function () {
    // 初始自适应窗体大小        
    left1.resize();      
    // 窗体大小变化时，left1也跟着变化
    window.onresize = function(){
       // 这里稍微延时一点，渲染效果更好
      setTimeout(function () {
      left1.resize();     
            },200)

        }
    })

结果：

ok,整体的使用就是这样，详细处理可以查看官网实例。 http://echarts.baidu.com/echarts2/doc/example.html 

这里推荐一款个人决定更好的图标展示更为友好的js: highcharts  https://www.hcharts.cn/demo/highcharts

个人觉得，这个使用更好，数据封装更为简单，友好，感兴趣的可以试试。