echarts渐变色可点击半圆图

  如上所示，用饼图改一个半圆图，同时半圆每个item设置不同的颜色。

  首先需要搞出来一个echarts的容器，如下图所示，这玩意和echarts的官网搞个Div效果是一样的，只不过封装了一层，只需要设置一下参数就行。

<Echart :options="options" style="margin:0; width: 50%;height: 100%;" ref="echart1" @click="pieClick($event)"></Echart>

  上面有个@click，这就是点击事件，如下所示方法，其中dataIndex是点击的索引位置，这样就知道是点击了哪个Item。

pieClick(param){
    this.nowIndex = param.dataIndex;
}

  然后说一下半圆，其实这个半圆是一整个圆，只不过底下那个半圆是使用alpha通道隐藏了，比如设置颜色 rgba(0,0,0,0)，最后一个是0，那么就是透明了。

  第二步是设置圆的半径超过100%，则占位就大了，radius: ["90%", "130%"]，

  要设置每个item渐变的颜色，其实和设置单色一样，LinearGradient中四个参数分表表示 右，下，左，上四个方位，0 0 0 1 则表示颜色从上方开始渐变。

itemStyle: {
    emphasis: {
        shadowBlur: 10,
            shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
    },
        normal:{
            color: function (colors) {
                var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#FFC950'},
                        {offset: 0, color: '#D984C3'},
                        {offset: 1, color: '#D947AD'}
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#B676F7'},
                        {offset: 1, color: '#2567F1'}
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#4F9FCE'},
                        {offset: 1, color: '#B676F7'}
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#FF7B7B'},
                        {offset: 1, color: '#F2A9F1'}
                    ]),
                    'rgba(0,0,0,0)'

                ];
                return colorList[colors.dataIndex];
            },
        }
},

  通过上述就形成了上面的渐变可点击半圆图。

  完整的options如下，

options() {
    let ths =this

    let list = [{
        name: "张三",
        value: "9"
    }, {
        name: "李四",
        value: "50"
    }, {
        name: "王五",
        value: "30"
    }, {
        name: "马六",
        value: "9"
    },{
        name:'',
        value:'0'
    }]

    let sum = 0;
    list.map((item, index) => {
        sum += parseInt(item.value)
    })

    list[list.length - 1].value = sum

    //半圆图是因为最后一个颜色，使用alpha设置为透明，其实下半圆还是存在的
    let colorList = ['#D947AD', '#4E9ECD', '#FF7B7B', '#F5C851', "rgba(0,0,0,0)"]

    return {
        grid:{
            width:'20%'
        },
        title:{
            subtext:'出货情况',
            textAlign:'center',
            // 副标题样式
            subtextStyle: {
                fontSize: ths.fontChart(2),
                color: 'white'
            },
            left:ths.centerX-1.5+'%',
            top:(ths.centerY-10)+'%',
        },
        tooltip: {
            show:false,
        },
        color: colorList,
        series: [{
            name: "",
            type: "pie",
            hoverAnimation: false,
            startAngle: -180,
            radius: ["90%", "130%"],
            center: ["50%", "90%"],
            label: {
                normal: {
                    show: true,
                    position: "inner", //显示在扇形上
                    formatter: "", //显示内容
                    textStyle: {
                        color: "white", // 改变标示文字的颜色
                        fontSize: 12, //文字大小
                        fontWeight: "bold",
                    },
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: list,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
                normal:{
                    color: function (colors) {
                        var colorList = [
                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#FFC950'},
                                {offset: 0, color: '#D984C3'},
                                {offset: 1, color: '#D947AD'}
                            ]),
                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#B676F7'},
                                {offset: 1, color: '#2567F1'}
                            ]),
                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#4F9FCE'},
                                {offset: 1, color: '#B676F7'}
                            ]),
                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#FF7B7B'},
                                {offset: 1, color: '#F2A9F1'}
                            ]),
                            'rgba(0,0,0,0)'

                        ];
                        return colorList[colors.dataIndex];
                    },
                }
                // color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                //   { offset: 0, color: '#C0D2FF' },
                //   // { offset: 0.7, color: '#DAD3F6' },
                //   { offset: 1, color: '#FADBFF' }
                // ])
            },
        }, ],
    }
},