echart pictorialBar

echart pictorialBar

重点： symbol: ‘path://M0,0 L0,10 C0,5.5 5,5.5 10,5 C5,4.5 0,4.5 0,0 z’,//横向

       symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',//纵向

var chartData = [
                { value: 335, name: "厨余垃圾" },
                 { value: 335, name: "餐厨垃圾" },
              { value: 310, name: "其他垃圾" },
              { value: 234, name: "可回收物" },
              { value: 135, name: "有害垃圾" },

    ];
var   colorList = {
                first: ['#00FFB2', '#007D42', '#D9D9D9', '#00ABE0', '#FF3A00'],
                second:['#01B962', '#007D42', '#ACACAC', '#0072BE', '#FF3F00'],
            }
    option= {
        backgroundColor: '#000f4e',//背景色
        title:{
           show: true,
           text: '专项监督',
           textStyle: {
                color: '#fff', // 主标题文字颜色
                fontFamily:'Simsun',
                fontSize: 14
            },
            x:'center',
            y:'top'
        },
        tooltip: {
            show: true,
            trigger: 'axis',  //axis , item
            backgroundColor:'rgba(0,15,78,0.6)',
            borderColor:'#00afff',
            borderWidth: 1,
            borderRadius: 0,
            textStyle: {
                color: "#fff",
                fontSize: 13,
                align:'left'
            },
            axisPointer:{
                type: 'line', //'line' | 'cross' | 'shadow' | 'none
                lineStyle: {
                    width: 1,
                    type: 'dotted',
                    color: 'rgba(46,149,230,.9)'
                }
            }
        },
        legend:{
            show: true,
            orient:'horizontal', //'vertical' 
            data: ['整改'],
            icon: 'circle',
            selectedMode: true,
            itemWidth: 10,
            itemHeight: 10,
            itemGap:20,
            textStyle:{
                fontSize: 13,
                color: '#9bc8ff'
            },
            x: 'center',
            y: '25'
        },
        grid: {
            top: '25%',
            right: '3%',
            bottom: '10%',
            left: '10%'
        },
        yAxis:{
            type: 'category',
            axisLabel: {
                show: true,
                interval: 0, //类目间隔 设置为 1，表示『隔一个标签显示一个标签』
                textStyle: {
                    color: '#fff',
                    fontSize: 13
                },
                formatter: '{value}'
            },
            axisLine:{
                lineStyle:{
                    color:'rgba(15,45,134,.9)'
                }
            },
            axisTick:{
                show: false //坐标轴小标记
            },
            data: (function(data){
                var arr=[];
                data.forEach(function(items){
                    arr.push(items.name);   //name
                });
                return arr;
            })(chartData)  //载入横坐标数据
        },
        xAxis: {
            type: 'value',
            name: '（次）',
            nameTextStyle:{
                color:'#93d3fc',
                fontSize: 12,
                align: 'right'
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#9bc8ff',
                    fontSize: 13
                },
                interval: 0, //类目间隔 设置为 1，表示『隔一个标签显示一个标签』
                margin: 10,
                //formatter: '{value}'
            },
            splitNumber: 5, //y轴刻度设置(值越大刻度越小)
            axisLine:{ //y轴线
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(15,45,134,.6)', //横向网格线颜色
                    width: 1
                }
            },
            axisTick:{
                show: false //坐标轴小标记
            }
        },
        series:[
            
            {
                name:'整改',
                type:'pictorialBar',
                barWidth: 40,
                stack: '总量',
                label: {
                    normal: {
                        show: false,
                        position: 'top',
                        textStyle: {
                            color: '#9bc8ff',
                            fontSize: 12
                        },
                        formatter: '{c}' //图形上显示数字
                    }
                },
                itemStyle: {
                    normal: {
                          color: params => { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                        return  {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                       colorStops: [{
                                    offset: 0,
                                    color: colorList.first[params.dataIndex]
                                },
                                {
                                    offset: 1,
                                    color: colorList.second[params.dataIndex]
                                }
                        ],
                        }
                    }
                      
                    }
                },
                  symbol: 'path://M0,0 L0,10 C0,5.5 5,5.5 10,5 C5,4.5 0,4.5 0,0 z',
                // symbol: 'path://M12.000,0.000 C12.000,0.000 16.074,60.121 22.731,60.121 C26.173,60.121 3.234,60.121 0.511,60.121 C7.072,60.121 12.000,0.000 12.000,0.000 Z',
                data: (function(data){
                    var arr=[];
                    data.forEach(function(items){
                        arr.push(items.value);   //value
                    });
                    return arr;
                })(chartData)  //载入数据
            }
        ]   
    };