数据展现---Echarts

来源：互联网发布：java redis 模糊查询编辑：程序博客网时间：2024/06/10 11:17

Echarts是一款不错的百度开源图表控件，里面包含了很多常见的图，对地图的支持也不错。具体不多说，可以到官网看看文档。

下面举例说明下几个可能用到的东东。

1. 为数据定制不同的颜色。

说实话，里面提供了相当多的方式对颜色的控制，包括边框，标题，图例，图，提示，等等的颜色控制，内容还是相当丰富的。

不同的系列控制颜色很简单，就是在序列的数据里面就可以指定颜色。同一个序列的也可以控制。

a.通过itemStyle来控制颜色

  series : [
{
name:'蒸发量',
type:'bar',
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],
itemStyle: {
normal: {
color: function(params) {
    var colorList = [
    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
    ]; //可以循环使用颜色
    return colorList[params.dataIndex%colorList.length]
    }
}
}
}

b.通过数据项来控制。

data:[{
value:2.0,
color:"red"
}, 4.9, 7.0, {
value:23.2,
color:"green"
}]

当然这样的确是可以控制，就是要写的颜色太多了，动态数据的时候工作量还是相当大的。

当然也可以把他们改成不同的序列，再来调整颜色。

2. 设置预测虚线

         {
                "name":'预测值',
                "type":'line',
                symbol:'none',
                "data":[0],
                "itemStyle": {
                    "normal": {
                       "lineStyle": {width:1,type:"dashed"}
                       }
                }
            }

3.自定义Tooltip

tooltip : {
 trigger: 'axis',
 formatter: function(v){
 if(v.length==2) {return v[0].name+"月 "+v[0].seriesName+":"+v[0].value+"公里 "+v[1].seriesName+":"+v[1].value+"万元";}
 else if(v.length==1){
 return ''; //自定义实现
 }
 }
 //formatter: '{b}月 {a0}:{c0}人 {a1}:{c1} '
 }

4.显示某省市地图，这个mapType很重要，名称要和Echarts里面的对应，不然地图是显示不出来的

series : [
            {
                name: '人数',
                type: 'map',
                mapType: '湖北',
                selectedMode : 'single',
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[
                    {name: '武汉市',value: 0},
                   {name: '随州市',value: 0}
                ]
            }

点击地图区域

5.坐标格式化，这个是项目中遇到的一个栗子。

看到这个纵坐标是不是觉得数字很奇怪呢？我也是想了半天，百思不得其解。后来改了一下纵坐标的axisLabel

yAxis : [{
            type:'value',
            name:'业绩',
            scale:true,
            axisLabel:{
               formatter:function(val){ return val.toFixed(2); }
            }
        }],

相信你也看到问题了，Echarts通过splitNumber切分显示label,有些小数后面的位数很多，左边的整数位都挡住了，看不见。

所以格式化一下就ok了。

6.设置Echarts Theme

require.config({
        paths: {
            echarts: '/web/js/echarts/dist'
        }
    });
   require(
        [
            'echarts',
            'echarts/theme/blue',
            'echarts/chart/line',
            'echarts/chart/map'
        ],
        function (ec,theme) {
           var ecConfig = require('echarts/config');
           var myChart = ec.init(document.getElementById(chartId),theme);
           window.onresize = myChart.resize; //这样就可以随着窗口改变图大小，你值得拥有！！！
           myChart.setOption(opt);
        }
   );

7.修改饼图线长

                name:'用户来源',
                selectedOffset:30,
                type:'pie',
                radius : '80%',
                center: ['50%', '60%'],
                itemStyle: {
                    normal: {
                        label: {
                          show: true
                        },
                        labelLine: {
                          show: true,
                          length: 6
                        }
                    }
                },
                data:[
                    {value:335, name:'搜索引擎'},
                    {value:234, name:'直接访问'}
                ]

0 0