Details of the modified echarts (2): the number of rectangles, histogram, line charts, radar charts, etc.

1. Configuration FIG number of rectangular, is disposed directly take pie then type into treemap.

Modification type

option.series.type = 'treemap';

Close breadcrumbs

option.series.breadcrumb = false;

Close covering effect of the mouse to move up
option.series.hoverAnimation = false;

Turn off the prompt
option.tooltip.show = false;
closed histograms click node event
option.series.nodeClick = false;

Turn off the mouse response events
option.series.silent = false;

Turn off the mouse wheel event
option.series.roam = false;

Pitch width is provided between the several figures

option.series.itemStyle = {normal: {gapWidth: 1,}};

Chart label arranged inside the character position

option.series.data[i].label = {position: ['3%', '3%'],};

FIG gradient inside into

for (var j = 0; j < option.series.data.length; j++) {
    var colorList = [['rgb(35, 64, 98)', 'rgb(43, 99, 120)'], ['rgb(35, 64, 98)', 'rgb(43, 99, 120)'], ['rgb(31, 60, 94)', 'rgb(40, 107, 152)'], ['rgb(25, 60, 98)', 'rgb(25, 96, 138)'], ['rgb(35, 64, 98)', 'rgb(43, 99, 120)'], ['rgb(15, 47, 94)', 'rgb(9, 71, 144)'], ['rgb(25, 60, 98)', 'rgb(25, 96, 138)'], ['rgb(31, 60, 94)', 'rgb(40, 107, 152)'], ['rgb(47, 121, 134)', 'rgb(6, 100, 125)']];
    option.series.data[j].itemStyle = {
        color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [{
            offset: 0,
            color: colorList[j][0]
        },
        {
            offset: 1,
            color: colorList[j][1]
        }], false),
    };
}　　

label text changes directly here + there will be mistakes, so can only be used to assemble a string concat

option.series.label.normal = {
    rich: {
        left: {
            align: 'left',
        }
    },
    formatter: function(a) {
        agf.push(a.dataIndex);
        var sumData = 0;
        for (var i = 0; i < option.series.data.length; i++) {
            sumData += option.series.data[i].value;
        }
        var perc = new Number((a.value / sumData) * 100);
        str = '{name|';
        return str.concat(a.name, '}\n\n', perc.toFixed(2), '%', '\n\n￥', fmoney(a.value, 2), '百万元');
    }
};

　　

The effect is as follows:

2. The certain ordering array of x-axis data (that is, to get the acquired data is then sorted index number, in the group at)

option.series dataSer = var [0] .data; 
var dataSer1 option.series = [. 1] .data; // I have two sets of these two series, can get his or directly circulation according 
var dataX = option. XAXIS [0] .data; 
var sortArr = [ "the fourth quarter of 2017", "the first quarter of 2018", "the second quarter of 2018", "the third quarter of 2018", "the fourth quarter of 2018 ',' the first quarter of 2019 "," the second quarter of 2019 "," the third quarter of 2019 "]; 
var sortSer = [], 
sortSer1 = [], 
sortX = []; 
var index; 
for (var I = 0; I <sortArr .length; I ++) { 
    index = dataX.indexOf (sortArr [I]); 
    IF (index> -1) { 
        sortX.push (dataX [index]); 
        sortSer.push (dataSer [index]); 
        sortSer1.push ( dataSer1 [index]); 
    } 
option.series [0] = sortSer .data; 
option.series [. 1].data = sortSer1; 
option.xAxis [0] = sortX .data;

3. Excessive text wrap allowed to cut the x-axis (a line I have here is five words)

for (var i = 0; i < option.xAxis[0].data.length; i++) {
    option.xAxis[0].data[i] = option.xAxis[0].data[i].slice(0, 5) + '\n' + option.xAxis[0].data[i].slice(5);
}

4. Color settings

-------------------------------------------------- ------------------------- columns of different colors (for other color change) 
option.series [0] = {.itemStyle 
    Normal: { 
        color : function (the params) { 
            var the colorList = [ "089CFE #", "# 089CFE", "# 089CFE", "# 089CFE", "# 089CFE", "# 74EFFF"]; 
            return the colorList [params.dataIndex]; 
        } 
    }

-------------------------------------------------- ------ column gradient
option.series [0] = {.itemStyle
Normal: {
color: new new echarts.graphic.LinearGradient (
0, 0, 0,. 1, [{
offset: 0,
color: '# 06B5D7 '
},
{
offset:. 1,
Color:' # 1E3FF7 '
},
])
}
};

----------------------------------------------------------------------------柱子渐变加不同色
option.series[0].itemStyle = {
　　normal: {
        color: function(params) {
            var colorList = [['rgb(120,186,247)', 'rgb(98,132,227)'], ['rgb(229,90,67)', 'rgb(183,52,20)'], ['rgb(255,176,35)', 'rgb(228,151,23)'], ['rgb(33,247,183)', 'rgb(12,181,133)']];
            var index = params.dataIndex;
            if (params.dataIndex >= colorList.length) {
                index = params.dataIndex - colorList.length;
            }
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: colorList[index][0]
            },
            {
                offset: 1,
                color: colorList[index][1]
            }]);
        }
    }
};

The modifications of detail

option.series.hoverAnimation = false; // Close highlight effect 
option.tooltip.show = false; // prompted whether to cover up 
option.legend.selectedMode = false; // selection effect 
option.series.clickable = false; // click effect 
---------------------------------------------- -------- prompt text provided 
option.series.label.normal.formatter = '{D}%'; 
--------------------- -------------------------------- mouse after covering pie prompt text 
option.series.label.emphasis.formatter = '{D}%'; 
option.series [0] .label.normal.offset = [80, 0]; 

option.series.label.emphasis.textStyle.fontSize = 36; 
option.series.label.emphasis.textStyle. = fontWeight "Normal"; 
-------------------------------------------- --------- color grid lines 
option.xAxis [0] .splitLine.lineStyle.color = '# ffffff';
----------------------------------------------------图例的大小和间距 
option.legend.itemWidth = 40; 
option.legend.itemHeight = 40; 
option.legend.itemGap = 40;
option.legend.icon='line';
option.legend.padding=[0,0,0,0]
option.legend.formatter = function(params) {
    return "{title|" + params + "}{value|" + (objData[params].value) + "}{title|项}";
};
----------------------------------------------图例位置
option.legend.top = "100px";
option.legend.padding = [50, 0, 0, 445];
option.legend.left = 'auto';
option.legend.right = 40;
option.legend.top = 5;
option.legend.selectedMode = false;
-------------------------------------------------- - intermediate node line graph icon 
option.series [0] .symbol = 'circle '; // none is canceled node 
option.series [0] = 10 .symbolSize, 
------------- --------------------------- histogram data tag 
option.series [0] .label.normal.offset = [80 , 0] ; 
option.series [0] = .label.normal.formatter '{C}%'; 
----------------------------- ----------- histogram column 
option.series [0] = .barGap '10% '; 
option.series [0] .barWidth = "15%"; 
option.series [. 1]. = barWidth "15%"; 
----------------------------------------- radar FIG. background grid properties 
option.radar.splitNumber =. 4; 
option.radar.splitArea = Show {:} to false; 
option.radar.splitLine.lineStyle = { 
Color: '# 175E4B' 
};
------------------------------------------- radar chart five angles properties 
option.radar.name = { 
textStyle: { 
Color: '#FFFFFF', 
the fontSize: 20 is,}, 
}; 
------------------------ -------------------- radar chart content attribute 
option.series.itemStyle.normal.color = '# 26F091'; 
option.radar.center = ['50% ', '55%']; 
option.xAxis [0] = 20 is .axisLabel.margin; 
option.yAxis [0] = 20 is .axisLabel.margin; 
---------------- -------------------------------------- x, y-axis is provided 
option.yAxis [0]. = axisLabel.formatter '{value}%'; 
option.yAxis [0] = 0 .nameRotate; 
option.yAxis [0] .nameTextStyle.padding = [0,0,0,0], left and right lower