echarts中的个性化设计

1、柱状图中柱子上的渐变色的实现
配置： series[i]-bar.itemStyle.normal下的color值new echarts.graphic.LinearGradient()

series: [
            {
                name: '  ',
                type: 'bar',
                barGap: '-100%',
                barWidth: '60%',
                data: [310, 0, 0, 0, 0],
                itemStyle: { //设置渐变色
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#62d2d3'},
                                {offset: 1, color: '#4ba9a9'}
                            ]),
                        barBorderRadius: 2  //柱状角成椭圆形
                    }
                }
            }

 

渐变色效果

2、类似进度条的柱图
原理就是添加series系列，在正常显示的柱图下添加一个系列，每一条柱子的数据都是最大
所以在定义option前，应先定义阴影部分的数组

   var dataShadow =[];  //阴影部分的数组
    var yMax =  Math.max.apply(Math,data);
    for (var i = 0; i < data1.length; i++) {
        dataShadow1.push(yMax+10); //将正常显示的数组的最大值放入阴影数组
    }

以下就是阴影series系列的配置

series: [
            { // For shadow
                type: 'bar',
                label: {
                    show: true,
                    color: fontColor,
                    position: 'right',
                    offset: [10, -2],
                    formatter:  function(params){
                        return data[params.dataIndex];
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f5f5f5',
                        barBorderRadius: 2,
                        shadowColor: '#e0e0e0',
                        shadowBlur: 1,
                        shadowOffsetX: 0,
                        shadowOffsetY: -1,
                    }
                },
                barGap:'-100%',
                barCategoryGap:'40%',
                barWidth: '40%',
                data: dataShadow
            },
          {……}//正常显示的柱图系列

3、饼图
echarts2 中的饼图可以用属性 option.calculable : true 来控制内外环线的式样，并且这个属性的作用是：是否启用拖拽重计算特性

 

带内外圆环的饼图

但是在echarts3 中并没有这种样式的直接属性配置项，那么就需要使用两个series系列来模拟内外这两个环

series: [
            { //外圆环
                type: 'pie',
                center: ['40%','50%'], //此处的圆心坐标应该与饼图的圆心坐标一至
                radius: ['90%', '89.4%'],   //半径，应比正常饼图的半径大
                avoidLabelOverlap: false,//是否启用防止标签重叠策略
                startAngle: 225,

                hoverAnimation: false,
                legendHoverLink: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [100],
                color: lineColor
            },
            { //内圆环
                type: 'pie',
                center: ['40%','50%'],//此处的圆心坐标应该与饼图的圆心坐标一至
                radius: ['50%', '49.4%'], //半径，应比正常的饼图的半径小
                avoidLabelOverlap: false,//是否启用防止标签重叠策略
                startAngle: 225,

                hoverAnimation: false,
                legendHoverLink: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [100],
                color: lineColor
            },
            {
                name: "风险数量",
                type:'pie',
                center: ['40%','50%'],
                radius: ['55%', '84%'],
                clockwise: true, //是否开启顺时针
                label: {
                    normal: {
                        show: false
                    }
                },
                labelLine: {
                    show: false
                },
                data: sectionData,
                color: ['#ff7f50','#87cefa','#da70db','#32cd32','#6495ed','#ff69b4']
            }
        ]
    };

结果如下图