Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The problem

Drawing diagrams is a common requirement on the front end. I had a problem with setting the color of the text at the top of the column to a different color when I used Echarts to draw a bar chart.

Effects to be achieved:

Reference: Echarts configuration item documentation

The color of the bar can be set by color in the series-itemstyle, and each bar can be set differently. Because color can be defined as function

Set the main body color main code (params for four cylinder, dataIndex is the serial number, in the echarts can through echarts. Graphic. That LinearGradient to set the gradient) :

color: function (params) {
    var colorList = [  ['#5498ff'.'#89d3f6'], ['#0acd81'.'#b7f5bf'], ['#ff9137'.'#ffd59a'], ['#f97878'.'#ffafaf']].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]}]); }Copy the code

At this point, no text is displayed above the column. If you want to display text, you can continue to set the label property under itemStyle

Specific Settings:

label: {
    show: true.position: 'top'.textStyle: {
        fontSize: '14px',}},Copy the code

At this point, the chart style (the text color on the bar is uniform black) :

At that time, I wondered if I could set color in textStyle like bar color, but after checking the configuration item manual, I found that it could only be set to string, not function. So the four words will still be one color.

To solve

You can add configuration colors to series’ data Settings, which were set directly as numeric arrays

/ / result
data: [9.21.23.12]
Copy the code

In fact, you can configure the corresponding color of the label, value in the value code:

data: [{
    value:9.label: {
        textStyle: { color: '#2e77dc'}}}, {value:21.label: {
        textStyle: { color: '#0aa211'}}}, {value:23.label: {
        textStyle: { color: '#ff6600'}}}, {value:12.label: {
        textStyle: { color: '#f12222'}}}]Copy the code

Full configuration item

option01 = {
    xAxis: {
        type: 'category'.data: ['good'.'good'.'qualified'.'Unqualified'].axisTick: { show: false,},axisLabel: {
            textStyle: { color: '# 999999' },
            interval: 0,},axisLine: {   
            lineStyle: { color: '#cccccc'}}},yAxis: {
        type: 'value'.name: 'number'.nameTextStyle: {color: '# 666666' },
        axisTick: { show: false },
        axisLabel: { textStyle: { color: '# 999999'}},axisLine: {   
            lineStyle: { color: '#cccccc',},show: true 
        },
        splitLine: {  
            show: true.lineStyle: {type: 'dashed',}}},series: [{name: 'Class Grade Distribution'.type: 'bar'.barWidth: '24px'.itemStyle: {normal: {barBorderRadius: [12.12.0.0].label: {
                        show: true.position: 'top'.textStyle: { fontSize: '14px',}},color: function (params) {
                        var colorList = [  ['#5498ff'.'#89d3f6'], ['#0acd81'.'#b7f5bf'], ['#ff9137'.'#ffd59a'], ['#f97878'.'#ffafaf']].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]}]); }}},/ / result
            data: [{
                value:9.label: {
                    textStyle: { color: '#2e77dc'}}}, {value:21.label: {
                    textStyle: { color: '#0aa211'}}}, {value:23.label: {
                    textStyle: { color: '#ff6600'}}}, {value:12.label: {
                    textStyle: { color: '#f12222'}}}]}],grid: {
        x: 40.y: 30.x2: 0.y2: 35}},Copy the code