echarts实例（持续更新）

最新推荐文章于 2024-06-20 09:30:03 发布

深巷的猫~

最新推荐文章于 2024-06-20 09:30:03 发布

阅读量1.4k

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_44495678/article/details/130235520

版权

initChart() {
      this.chart = this.$echarts.init(document.querySelector('.gender'));
      const myData = ['50以上', '40-49', '30-39', '20-29', '20以下'];
      const femaleValue = [1341, 24211, 46060, 41765, 61251];
      const maleValue = [4723, 45523, 80739, 65923, 91583];
      const option = {
        legend: {
          data: ['男', '女'],
          textStyle: {
            color: '#000',
            fontSize: 14
          },
          selectedMode: false,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: [{
          show: false,
          left: '4%',
          top: 40,
          bottom: 10,
          containLabel: true,
          width: '49%'
        }, {
          show: false,
          left: '50.5%',
          top: 40,
          bottom: 10,
          width: '0%'
        }, {
          show: false,
          right: '5%',
          top: 40,
          bottom: 10,
          containLabel: true,
          width: '42%'
        }],
        xAxis: [{
          gridIndex: 0,
          splitNumber: 2,
          type: 'value',
          inverse: true,
          axisLine: {
            show: true,
            textStyle: {
              color: '#000'
            },
          },
          axisTick: {
            show: false,
          },
          position: 'bottom',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000',
              fontSize: 12
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#000',
              width: 1,
              type: 'solid'
            }
          }
        }, {
          gridIndex: 1,
          show: false,
        }, {
          gridIndex: 2,
          splitNumber: 2,
          type: 'value',
          axisLine: {
            show: true,
            textStyle: {
              color: '#000'
            },
          },
          axisTick: {
            show: false,
          },
          position: 'bottom',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000',
              fontSize: 12,
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#57617f',
              width: 1,
              type: 'solid',
            },
          },
        },],
        yAxis: [{
          type: 'category',
          inverse: true,
          position: 'left',
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            show: true,
            color: '#000'
          },
          data: myData,

        }, {
          gridIndex: 1,
          type: 'category',
          inverse: true,
          position: 'left',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            align: 'left'
          },
          data: myData,
        }, {
          gridIndex: 2,
          type: 'category',
          inverse: true,
          position: 'left',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
          },
          data: myData,
        },],
        series: [{
          name: '男',
          type: 'bar',
          barGap: 20,
          barWidth: 20,
          barCateGoryGap: 20,
          stack: '入',
          xAxisIndex: 0,
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: 'rgba(42,141,239,0.65)',
              barBorderRadius: [30, 0, 0, 30]
            }
          },
          data: maleValue,
        }, {
          name: '女',
          type: 'bar',
          barGap: 20,
          barWidth: 20,
          barCateGoryGap: 20,
          stack: '出',
          itemStyle: {
            normal: {
              color: 'rgb(253,183,183)',
              barBorderRadius: [0, 30, 30, 0]
            }
          },
          xAxisIndex: 2,
          yAxisIndex: 2,
          data: femaleValue,
        }]
      };
      this.chart.setOption(option);
    },