ECharts个性化图表样式的实现

1.绘制饼状图

option ={
    series : [
        {
            name: '访问来源',
            type: 'pie',//饼状图类型
            radius: '55%',//图表半径
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ]
        }
    ]
}

2.绘制南丁格尔图

ECharts 中的 饼图 也支持通过设置 roseType 显示成南丁格尔图

option ={
    series : [
        {
            name: '访问来源',
            type: 'pie',//饼状图类型
            radius: '55%',//图表半径
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            roseType: 'angle',//玫瑰图类型
        }
    ]
}

3.配置阴影

option ={
    series : [
        {
            name: '访问来源',
            type: 'pie',//饼状图类型
            radius: '55%',//图表半径
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            roseType: 'angle',//玫瑰图类型
            itemStyle: {
     //normal 选项显示的是正常展示下的样式      
    normal: {
        // 阴影的大小
        shadowBlur:100,
        // 阴影水平方向上的偏移
        shadowOffsetX: 0,
        // 阴影垂直方向上的偏移
        shadowOffsetY: 0,
        // 阴影颜色
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    },
    //emphasis 是当鼠标 hover 时候的高亮样式
     emphasis: {
        shadowBlur: 400,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}
        }
    ]
}

4.设置深色背景和浅色标签

注意：label 和 labelLine 的样式有 normal 和 emphasis 两个状态，这与 itemStyle 相同。

option ={
    series : [
        {
            name: '访问来源',
            type: 'pie',//饼状图类型
            radius: '55%',//图表半径
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            roseType: 'angle',//玫瑰图类型
        }
    ],
    //深色主题
     backgroundColor: '#2c343c',
     //背景色设置完成后，同样将文本的样式设置为全局的文本样式
 textStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
    },
    //每个系列的文本设置在 label.normal.textStyle
    label: {
    normal: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
},
//标签的视觉引导线的颜色设置为浅色
labelLine: {
    normal: {
        lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}
}

5.扇形的颜色

 （1）通过设置颜色实现图形的层次感和空间感。

option ={
    series : [
        {
            name: '访问来源',
            type: 'pie',//饼状图类型
            radius: '55%',//图表半径
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            roseType: 'angle',//玫瑰图类型
            
                itemStyle: {
    normal: {
        // 设置扇形的颜色
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
},
        }
    ],

    //深色主题
     backgroundColor: '#2c343c',
     //背景色设置完成后，同样将文本的样式设置为全局的文本样式
 textStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
    },
    //每个系列的文本设置在 label.normal.textStyle
    label: {
    normal: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
},
//标签的视觉引导线的颜色设置为浅色
labelLine: {
    normal: {
        lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}
}

（2）通过 visualMap 组件将数值的大小映射到明暗度

option ={
  backgroundColor: '#2c343c',
  visualMap: {
    // 不显示 visualMap 组件，只用于明暗度的映射
    show: false,
    // 映射的最小值为 80
    min: 80,
    // 映射的最大值为 600
    max: 800,
    inRange: {
        // 明暗度的范围是 0 到 1
        colorLightness: [0, 1]
    }
},
    series : [
        {
            name: '访问来源',
            type: 'pie',//饼状图类型
            radius: '55%',//图表半径
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            roseType: 'angle',//玫瑰图类型
             itemStyle: {
        normal: {
          color: '#c23531',
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
        }
    ],

    //每个系列的文本设置在 label.normal.textStyle
    label: {
    normal: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
},
//标签的视觉引导线的颜色设置为浅色
labelLine: {
    normal: {
        lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}
}