echarts line 渐变色 bar 颜色不一样直接拷贝代码到echarts 中可显示

本文链接：https://blog.csdn.net/Qlily_ing/article/details/93080049


app.title = '坐标轴刻度与标签对齐';
var computedText = function(params, l = 4, join="\n"){
    var newParamsName = "";
    var paramsNameNumber = params.length;// 实际字的个数
    var provideNumber = l;// 每行能显示的字的个数
    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
    // 判断字的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
    // 条件等同于rowNumber>1
    if (paramsNameNumber > provideNumber) {
        for (var p = 0; p < rowNumber; p++) {
            var tempStr = "";// 表示每一次截取的字符串
            var start = p * provideNumber;// 开始截取的位置
            var end = start + provideNumber;// 结束截取的位置
            // 此处特殊处理最后一行的索引值
            if (p == rowNumber - 1) {
                // 最后一次不换行
                tempStr = params.substring(start, paramsNameNumber);
            } else {
                // 每一次拼接字符串并换行
                tempStr = params.substring(start, end) + join;
            }
            newParamsName += tempStr;// 最终拼成的字符串
        }

    } else {
        // 将旧标签的值赋给新标签
        newParamsName = params;
    }
    //将最终的字符串返回
    return newParamsName
}

option = {
    backgroundColor: "#fff",
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['1', '2', '3', '成都市发电供c热  ', 'Fri', 'Sat', 'Sun'],
           axisLabel: {
                formatter: function(params){
                        return computedText(params)
                      }
           }
        }
    ],
    yAxis : [
        {
            type : 'value',
            name: "金额（亿元）",
            axisLine: { show: false },
            axisTick: {show: false },
            splitLine: { lineStyle: { color: "#eceff6" }}
        },
        {
            type : 'value',
            name: "数量（项）",
            axisLine: { show: false },
            axisTick: {show: false },
            splitLine: { show: false }


        }
    ],
    series : [
        {
            name:'金额',
            type:'bar',
            barWidth: 20,
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
                barBorderRadius: [25, 25, 0, 0],
                color: function(params) {
                    var  colorList = ["#ff505b","#7448ff","#3e96ff","#5ce71e","#ff7f34"]
                     return colorList[params.dataIndex];
                    
                }
            },
            zlevel: 1   

        },
        {
            name: "数量",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: { color:  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#e9f1fd" },
                  { offset: 0.6, color: "#e9f1fd" },
                  { offset: 1, color: "#fff" }
                ])},
            yAxisIndex: 1,
            color:["#c2d8f0"],
            smooth: true
        }
    ],
    color:["#ff505b","#7448ff","#3e96ff","#5ce71e","#ff7f34"]
};