菜单 搜索
首页 前端知识 Echarts配置系列-图文并茂教你配置渐变色面积图，折柱双图，环形图，仪表盘图等

Echarts配置系列-图文并茂教你配置渐变色面积图，折柱双图，环形图，仪表盘图等

2024-04-15 09:04:38 前端知识 前端哥 1001 253 我要收藏

文章目录

        • 说明
        • 渐变色面积图
        • 如何修改图标legend样式
        • 如何去掉折线图小圆点
        • 如何设置粗细-折线图线条设置更细或者更粗
        • 如何修改X轴Y轴字体大小
        • 横向渐变色柱状图
        • 自动转动炫酷百分比环形图
        • 渐变色仪表盘
        • 简约风格圆环百分比仪表盘图
        • 双柱渐变色柱状图
        • 圆环占比百分比图（环形图）
        • 横向渐变色柱状图（去除刻度线）
        • 折线图柱状图混合（折柱混合）
        • 待继续补充
        • 今天就写到这里啦~
        • 欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

文章目录

        • 说明
        • 渐变色面积图
        • 如何修改图标legend样式
        • 如何去掉折线图小圆点
        • 如何设置粗细-折线图线条设置更细或者更粗
        • 如何修改X轴Y轴字体大小
        • 横向渐变色柱状图
        • 自动转动炫酷百分比环形图
        • 渐变色仪表盘
        • 简约风格圆环百分比仪表盘图
        • 双柱渐变色柱状图
        • 圆环占比百分比图（环形图）
        • 横向渐变色柱状图（去除刻度线）
        • 折线图柱状图混合（折柱混合）
        • 待继续补充
        • 今天就写到这里啦~
        • 欢迎路过的小哥哥小姐姐们提出更好的意见哇~~
rts配置系列](超简单的前端静态资源服务器部署–nginx)

说明
  • 本文列举了各种常用的图表
  • 各种常用配置信息
    可以通过下面链接测试你的demo 配置哦
    https://echarts.apache.org/examples/zh/editor.html?c=area-basic
渐变色面积图

代码配置

option = {
        title: {
          text: '每天都要开心呀'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['A', 'B']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'A',
            type: 'line',
            data: [120, 322, 101, 134, 90,20,51],
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,  color: '#3DD5B0'  // 100% 处的颜色
                }, {
                  offset: 1, color: '#295477' //   0% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            color: '#3DD5B0', //线条颜色
            smooth: true //线条平滑
          },
          {
            name: 'B',
            type: 'line',
            data: [220, 182, 191, 234, 290,190,60],
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,  color: '#00C6F7'  // 100% 处的颜色
                }, {
                  offset: 1, color: '#295477' //   0% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            color: '#00C6F7', //线条颜色
            smooth: true  //线条平滑
          }
        ]
      }
如何修改图标legend样式

修改代码中legend配置即可

  legend: {
          data: ['A', 'B'],
          // top: 32,
          right: 103,
          icon: 'circle', // 修改形状
          itemHeight: 7, // 修改icon图形大小
          itemWidth: 10,
          // itemGap: 24, // 修改间距
          textStyle: {
            fontSize: 8,
            color: '#ccc',
            // padding: [0, 0, 0, -8], // 修改文字和图标距离
          },
        },

修改后的样子

如何去掉折线图小圆点

直接去除小圆点，并且鼠标放到曲线上也不显示

series: [{symbol: "none"}]

去掉小圆点，但是鼠标放到曲线上会显示

series: [{showSymbol: false}]

如何设置粗细-折线图线条设置更细或者更粗

修改代码

option = {
        title: {
          text: '每天都要开心呀'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['A', 'B'],
          // top: 32,
          right: 103,
          icon: 'circle', // 修改形状
          itemHeight: 7, // 修改icon图形大小
          itemWidth: 10,
          // itemGap: 24, // 修改间距
          textStyle: {
            fontSize: 8,
            color: '#ccc',
            // padding: [0, 0, 0, -8], // 修改文字和图标距离
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'A',
            type: 'line',
            symbol: "none",
            data: [120, 322, 101, 134, 90,20,51],
            itemStyle: {
                normal: {
                    lineStyle: {
                      width:0.8 // 这里改粗细程度
                    }
                }},
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,  color: '#3DD5B0'  // 100% 处的颜色
                }, {
                  offset: 1, color: '#295477' //   0% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            color: '#3DD5B0', //线条颜色
            smooth: true //线条平滑
          },
          {
            name: 'B',
            type: 'line',
            showSymbol: false,
            data: [220, 182, 191, 234, 290,190,60],
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,  color: '#00C6F7'  // 100% 处的颜色
                }, {
                  offset: 1, color: '#295477' //   0% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            color: '#00C6F7', //线条颜色
            smooth: true  //线条平滑
          }
        ]
      }
如何修改X轴Y轴字体大小

修改代码

axisLabel: {
            textStyle: {
              fontSize: "25",
            },
          },
横向渐变色柱状图

代码配置

option = {
  // title: {
  //   text: 'World Population'
  // },
  // tooltip: {
  //   trigger: 'axis',
  //   axisPointer: {
  //     type: 'shadow'
  //   }
  // },
  // legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    axisLine:false,
    boundaryGap: [0, 0.01] // 避免柱子顶格，数字跑出去 echarts 柱子最大值
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230],
       showBackground: true,
     itemStyle: {
                //通常情况下：
                normal: {
                    barBorderRadius: 8,
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params) {
                        var colorList = [
                            ['rgb(14,102,179)', 'rgb(51,36,169)'],
                            ['#F5cF0D', '#fa9203'],
                            ['#61dbe8', '#0785de'],
                            ['#ff9717', '#ff4518'],
                        ];
                        var index = params.dataIndex;
                        if (params.dataIndex >= colorList.length) {
                            index = params.dataIndex - colorList.length;
                        }
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                            [{
                                    offset: 0,
                                    color: colorList[index][0]
                                },
                                {
                                    offset: 1,
                                    color: colorList[index][1]
                                }
                            ]);
                    }
                },
            },
      label: {
        show: true,
        position:'right',
        valueAnimation: true
      }
    }
  ]
};
自动转动炫酷百分比环形图

代码配置

 


let angle = 0;//角度，用来做简单的动画效果的
let value = 55.33;
option = {
backgroundColor:"#061740",
title: {
        text: '{a|'+ value +'}{c|%}',
        x: 'center',
        y: 'center',
        textStyle: {
            rich:{
                a: {
                    fontSize: 48,
                    color: '#29EEF3'
                },
                
                c: {
                    fontSize: 20,
                    color: '#ffffff',
                    // padding: [5,0]
                }
            }
        }
    },
    legend: {
        type: "plain",
        orient: "vertical",
        right: 0,
        top: "10%",
        align: "auto",
        data: [{
            name: '涨价后没吃过',
            icon: "circle"
        }, {
            name: '天天吃',
            icon: "circle"
        }, {
            name: '三五天吃一次',
            icon: "circle"
        }, {
            name: '半个月吃一次',
            icon: "circle"
        }],
        textStyle: {
            color: "white",
            fontSize: 16,
            padding: [10, 1, 10, 0]
        },
        selectedMode:false
    },
    series: [ {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                        startAngle: (0+angle) * Math.PI / 180,
                        endAngle: (90+angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#0CD3DB",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                        startAngle: (180+angle) * Math.PI / 180,
                        endAngle: (270+angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#0CD3DB",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                        startAngle: (270+-angle) * Math.PI / 180,
                        endAngle: (40+-angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#0CD3DB",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                        startAngle: (90+-angle) * Math.PI / 180,
                        endAngle: (220+-angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#0CD3DB",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                let point = getCirlPoint(x0, y0, r, (90+-angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#0CD3DB",//粉
                        fill: "#0CD3DB"
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            name: "ring5",  //绿点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                let point = getCirlPoint(x0, y0, r, (270+-angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#0CD3DB",      //绿
                        fill: "#0CD3DB"
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            name: '吃猪肉频率',
            type: 'pie',
            radius: ['58%', '45%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
                normal: {
                    position: "center",

                }
            },
            data: [{
                    value: value,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: { // 完成的圆环的颜色
                                colorStops: [{
                                    offset: 0,
                                    color: '#4FADFD' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#28E8FA' // 100% 处的颜色
                                }]
                            },
                        }
                    }
                },
                {
                    value: 100-value,
                    name: "",
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#173164"
                        }
                    }
                }
            ]
        },
        
        {
            name: "",
            type: "gauge",
            radius: "58%",
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 8,
            hoverAnimation: true,
            axisTick: {
                show: false
            },
            splitLine: {
                length: 60,
                lineStyle: {
                    width: 5,
                    color: "#061740"
                }
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    opacity: 0
                }
            },
            detail: {
                show: false
            },
            data: [{
                value: 0,
                name: ""
            }]
        },
        
    ]
};

function getCirlPoint(x0, y0, r, angle) {
    let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
    let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
    return {
        x: x1,
        y: y1
    }
}

function draw(){
    angle = angle+3
    myChart.setOption(option, true)
   //window.requestAnimationFrame(draw);
}

setInterval(function() {
    draw()
}, 100);
渐变色仪表盘

代码配置

option = {
    backgroundColor: "#072B79",
    tooltip: {
        formatter: "{b}{c}"
    },
    series: [{
        tooltip: {
            show: false
        },
        "name": 'wrap',
        "type": 'pie',
        "hoverAnimation": false,
        "legendHoverLink": false,
        center: ['50%','60%'],
        "radius": ['0%', '7%'],
        "z": 5,
        "label": {
            "normal": {
                "show": false,
                "position": 'center'
            },
            "emphasis": {
                "show": false
            }
        },
        "labelLine": {
            "normal": {
                "show": false
            }
        },
        "data": [{
            "value": 100,
            itemStyle: {
                normal: {
                    color: "#072B79"
                },
                emphasis: {
                    color: "#072B79"
                }
            }
        }]
    }, {
        tooltip: {
            show: false
        },
        "name": 'wrap',
        "type": 'pie',
        "hoverAnimation": false,
        "legendHoverLink": false,
        center: ['50%','60%'],
        "radius": ['6%', '8%'],
        "z": 5,
        "label": {
            "normal": {
                "show": false,
                "position": 'center'
            },
            "emphasis": {
                "show": false
            }
        },
        "labelLine": {
            "normal": {
                "show": false
            }
        },
        "data": [{
            "value": 100,
            itemStyle: {
                normal: {
                    color: "#24D8E7"
                },
                emphasis: {
                    color: "#24D8E7"
                }
            }
        }]
    }, {
        tooltip: {
            show: false
        },
        name: '刻度',
        type: 'gauge',
        radius: '83%',
        z: 1,
        min: 0,
        max: 1,
        center: ['50%','60%'],
        splitNumber: 5, //刻度数量
        startAngle: 180,
        endAngle: 0,
        axisLine: {
            show: true,
            lineStyle: {
                width: 5,
                color: [
                    [0.12, '#E71A6D'],
                    [0.35, '#F88168'],
                    [0.63, '#FBF76B'],
                    [0.8, '#7AD4DF'],
                    [1, '#70C27E'],
                ]
            }
        }, //仪表盘轴线
        axisLabel: {
            show: false
        }, //刻度标签。
        axisTick: {
            show: true,
            lineStyle: {
                color: 'auto',
                width: 0
            },
            length: -15
        }, //刻度样式
        splitLine: {
            show: true,
            length: 0,
            lineStyle: {
                color: 'auto',
                width: 2
            }
        }, //分隔线样式
        detail: {
            show: false
        },
        pointer: {
            show: false
        }
    }, {
        name: '本期',
        type: 'gauge',
        radius: '80%',
        min: 0,
        max: 1,
        center: ['50%','60%'],
        data: [{
            value: 0.89,
            name: '本期'
        }],
        splitNumber: 12, //刻度数量
        startAngle: 180,
        endAngle: 0,
        z: 5,
        axisLine: {
            show: true,
            lineStyle: {
                width: 0,
                color: [
                    [0.12, '#E71A6D'],
                    [0.35, '#F88168'],
                    [0.63, '#FBF76B'],
                    [0.8, '#7AD4DF'],
                    [1, '#70C27E'],
                ]
            }
        }, //仪表盘轴线
        axisLabel: {
            show: true,
            color: '#fff',
            fontSize:20,
            distance: -70,
            formatter:function(params){
                var value = params.toFixed(2)
                
                if(value == 0.00){
                    return '危'
                }else if(value == 0.25){
                    return '差'
                }else if(value == 0.50){
                    return '中'
                }else if(value == 0.75){
                    return '良'
                }else if(value == 1.00){
                    return '优'
                }else{
                    return ''
                }
            }
        }, //刻度标签。
        axisTick: {
            splitNumber: 10,
            show: true,
            lineStyle: {
                color: 'auto',
                width: 2
            },
            length: 20,
        }, //刻度样式
        splitLine: {
            show: true,
            length: 25,
            lineStyle: {
                color: 'auto',
                width: 5
            }
        }, //分隔线样式

        "itemStyle": {
            "normal": {
                "color": "#24D8E7" //指针颜色
            }
        },
        pointer: {
            width: 10,
            length: '80%'
        },
        detail: {
            formatter: function(params){
                return (params*100).toFixed(0) + '%'
            },
            fontSize: 50,
            color: "#fff",
            offsetCenter: ['0%', '-35%']
        },
        title: {
            offsetCenter: ['0', '-60%'], 
            fontSize: 40,
            color: "#fff",
            show: true
        },
    }]
};
简约风格圆环百分比仪表盘图

代码配置

option = {
    backgroundColor: "#072B79",
    tooltip: {
        formatter: "{b}{c}"
    },
  
    series: [  {
        name: '',
        type: 'gauge',
        radius: '80%',
        min: 0,
        max: 1,
        center: ['50%','60%'],
        data: [{
            value: 0.89,
            name: '本期'
        }],
        splitNumber: 8, //刻度数量
        startAngle: 210,
        endAngle: -50,
        z: 12,
        axisLine: {
            show: true,
            lineStyle: {
                width: 0,
                color: [
                    [0.01, '#E71A6D'],
                    [0.35, '#F88168'],
                     [0.55, '#E71A6D'],
                    [0.85, '#F88168'],
                     [0.92, '#E71A6D'],
                ]
            }
        }, //仪表盘轴线
        axisLabel: {
            show: false,
        }, //刻度标签。
        axisTick: {
            splitNumber: 10,
            show: true,
            lineStyle: {
                color: 'auto',
                width: 5
            },
            length: 30,
        }, //刻度样式
        splitLine: {
            show: false,
        }, //分隔线样式

        "itemStyle": {
            "normal": {
                "color": "#24D8E7" //指针颜色
            }
        },
        pointer: {
          show:false,
            width: 10,
            length: '80%'
        },
        detail: {
            formatter: function(params){
                return (params*100).toFixed(0) + '%'
            },
            fontSize: 120,
            color: "#fff",
            offsetCenter: ['0%', '0%']
        },
        title: {
           
            show: false
        },
    }]
};
双柱渐变色柱状图

代码配置

// prettier-ignore
let dataAxis = [ '在', '触', '屏', '上'];
// prettier-ignore
let data = [220, 182, 191, 234,];
let yMax = 500;
let dataShadow = [];
for (let i = 0; i < data.length; i++) {
  dataShadow.push(yMax);
}
option = {
  title: {
    text: 'Times',
  },
  xAxis: {
    data: dataAxis,
    axisLabel: {
      // inside: true,
      color: 'red'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#999'
    }
  },
  legend: {
    show: true
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
  series: [
  
    {
       name: '2011',
      type: 'bar',
      barWidth:20,
      showBackground: false,
      itemStyle: {
         barBorderRadius: 8,
         
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      data: data
    },{
       name: '2012',
      type: 'bar',
      barWidth:20,
      barGap:'150%',//柱图间距
      showBackground: false,
      itemStyle: {
         barBorderRadius: 8,
         
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'blue' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      data: data
    }
  ]
};
// Enable data zoom when user click bar.
const zoomSize = 6;
圆环占比百分比图（环形图）

代码配置

let color = ["#EB5757", "#4CCCD4", "#FAA53B"];
        let data = [];
        let data1 = [{name:'a',value:10},{name:'b',value:20,},{name:'c',value:23}]
        for (let i = 0; i < data1.length; i++) {
                data.push({
                        value: data1[i].value,
                        name: data1[i].name,
                        itemStyle: {
                                normal: {
                                        borderWidth: 25,
                                        // shadowBlur: 5,
                                        borderColor: color[i],
                                        shadowColor: color[i]
                                }
                        }
                });
        }
option = 
{
    backgroundColor: "white",
    color: color,
    title: {
        top: "48%",
        left: "49%",
        textAlign: "center"
    },
    tooltip: {
        show: false
    },
    toolbox: {
        show: false
    },
    series: [
        {
            name: "",
            type: "pie",
            clockWise: false,
            radius: ["50%", "50%"],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: "outside",
                        overflow: "none",
                        color: "inherit",
                        align: "center",
                        rich: {
                            a1: {
                                align: "center"
                            }
                        },
                        formatter: function (params) {
                            console.log(params, "每一个的值");
                            return `{a1|${params.name}}  \n` + `{a1|${params.value}}`;
                        }
                    },
                    labelLine: {
                        length: 30,
                        length2: 50,
                        // maxSurfaceAngle: 90,
                        show: true,
                        color: "#00ffff"
                    }
                }
            },
            data: data
        }
    ]
}
横向渐变色柱状图（去除刻度线）

代码配置

 option = {
  // title: {
  //   text: 'World Population'
  // },
  // tooltip: {
  //   trigger: 'axis',
  //   axisPointer: {
  //     type: 'shadow'
  //   }
  // },
  // legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    axisLine: false,
    splitLine:{show: false}, // 控制 背景网格线
    // boundaryGap: [0, 0.01],
  },
  yAxis: {
    type: 'category',
    data: ['5', '4', '3', '2', '1'],
    
        "axisTick":{       // 控制 y轴刻度线

          "show":false

        },
         "axisLine":{       //控制y轴线
          "show":false
 
        },
      
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      barWidth:12,// 控制柱子粗细
      data: [18203, 23489, 29034, 104970, 131744, 630230],
      showBackground: true,
      itemStyle: {
        // 通常情况下：
        normal: {
          barBorderRadius: 8,
          // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
          color(params) {
            const colorList = [
              ['rgb(14,102,179)', 'rgb(51,36,169)'],
              ['#F5cF0D', '#fa9203'],
              ['#61dbe8', '#0785de'],
              ['#ff9717', '#ff4518'],
            ];
            let index = params.dataIndex;
            if (params.dataIndex >= colorList.length) {
              index = params.dataIndex - colorList.length;
            }
            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: colorList[index][0],
              },
              {
                offset: 1,
                color: colorList[index][1],
              },
            ]);
          },
        },
      },
      label: {
        show: true,
        position: 'right',
        valueAnimation: true,
      },
    },
  ],
};

修改后的样子
修改代码

折线图柱状图混合（折柱混合）

代码配置

// prettier-ignore
let dataAxis = [ '在', '触', '屏', '上'];
// prettier-ignore
let data = [220, 182, 191, 234,];
let yMax = 500;
let dataShadow = [];
for (let i = 0; i < data.length; i++) {
  dataShadow.push(yMax);
}
option = {
  title: {
    text: 'Times',
  },
  xAxis: {
    data: dataAxis,
    axisLabel: {
      // inside: true,
      color: 'red'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  yAxis: [
    {
      type: 'value',
      name: '2011',
      min: 0,
      max: 250,
    //     axisLine: {
    //   show: false
    // },
    // axisTick: {
    //   show: false
    // },
    axisLabel: {
      color: '#999'
    },
      interval: 50,
     
    },
    {
      type: 'value',
      name: '2012',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value}'
      }
    }
  ],
  
  legend: {
    show: true
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
  series: [
  
    {
       name: '2011',
      type: 'bar',
      barWidth:20,
      showBackground: false,
      itemStyle: {
         barBorderRadius: 8,
         
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      data: data
    },{
       name: '2012',
      type: 'line',
      barWidth:20,
      barGap:'150%',//柱图间距
      showBackground: false,
      yAxisIndex: 1,
      itemStyle: {
         barBorderRadius: 8,
         
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'blue' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      data: [20, 18, 11, 24,]
    },
    
  ]
};
// Enable data zoom when user click bar.
const zoomSize = 6;
待继续补充
今天就写到这里啦~
  • 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
  • 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

在这里插入图片描述

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~
转载请注明出处或者链接地址：https://www.qianduange.cn//article/4959.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

vue3绘制内容自动无缝滚动表格

2024-04-25 16:04:07

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

vue里使用样式color: var(--Editor-text)，已经定义了--Editor-text，但是却显示变量--Editor-text未定义，为啥

2024-04-25 08:04:19

wangEditor设置初始文字颜色

2024-04-23 15:04:38

Golang 使用 Gin 框架接收 HTTP Post 请求体中的 JSON 数据

2024-04-23 22:04:53

Python读写Json文件

2024-04-23 22:04:19

【头歌】——数据分析与实践-python-网络爬虫-Scrapy爬虫基础-网页数据解析-requests 爬虫-JSON基础

2024-04-23 22:04:19

ObjectMapper转化对象常用方法(转LIst、Map，以及Type、JavaType、constructType的学习)

2024-04-23 22:04:02

大家推荐的文章
1

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
2

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
3

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
4

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
5

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
6

移动端css布局大全

2024-02-06 15:02:421000
7

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
8

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
9

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
10

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！