echarts整理（四） 柱状图

1.柱状图显示数值

1.初始化

  init() {
        var chartDom = document.getElementById('myecharts')
        this.data1 = echarts.init(chartDom)
        var option

        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {
            show: false,
          },
          grid: {
            top: '2%',
            left: '3%',
            right: '80px',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            boundaryGap: [0, 0.01],
          },
          yAxis: {
            type: 'category',

            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            // axisLabel: {
            //   show: false,
            // },
            splitLine: {
              show: false,
            },
          },
          series: [
            {
              name: '2011',
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: '#f1f1f1',
                borderRadius: 10,
              },
              barMaxWidth: 12,
              barMinWidth: 12,

              label: {
                show: true,
                position: [260, 0],

                color: 'black',
                formatter: (params) => {
                  return params.value + 'mm'
                },
              },

              itemStyle: {
                borderRadius: 10,
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: '#53b4ff' }, // 0% 处的颜色
                    { offset: 1, color: '#008af4' }, // 100% 处的颜色
                  ],
                  global: false, // 缺省为 false
                },
              },
              data: [18203, 23489, 29034, 104970, 131744, 630230],
            },
          ],
        }

        option && this.data1.setOption(option)
        window.onresize = () => {
          this.data1.resize()
        }
      },

二、双系柱状图

1.初始化

  initCharts() {
        this.jytjChart = echarts.init(document.getElementById('jytjChart'))
        // 指定图表的配置项和数据
        var option = {
          grid: {
            left: 5,
            right: 1,
            bottom: 10,
            containLabel: true,
          },
          color: ['#4FC3F7', '#91CC75'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              animation: false,
              label: {
                backgroundColor: '#505765',
              },
            },
          },
          legend: {
            // data: ["三月", "四月"],
            top: 10,
            right: 'center',
            textStyle: {
              color: '#666',
            },
            icon: 'roundRect',
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              axisLine: {
                lineStyle: {
                  color: '#333',
                },
              },
              axisLabel: {
                color: '#666',
                interval: 0, // 设置 X 轴标签完全显示
              },
              data: ['第一周', '第二周', '第三周', '第四周', '第五周'],
            },
          ],
          yAxis: [
            {
              name: '',
              type: 'value',
              splitLine: {
                show: false,
              },
              axisLabel: {
                // color: '#2A7587',
              },
              axisLine: {
                show: false,
                // lineStyle: {
                //   color: '#2A7587',
                // },
              },
            },
          ],
          series: [
            {
              name: '三月',
              type: 'bar',
              barWidth: 20,
              barGap: '0',
              lineStyle: {
                width: 5,
              },
              showBackground: true,
              backgroundStyle: {
                color: '#f5f7f9',
                borderRadius: 2,
              },
              itemStyle: {
                // borderRadius: 10,
                borderWidth: 3,
                borderType: 'solid',
                borderColor: '#f5f7f9',
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 1, color: '#8ec1f8' }, // 0% 处的颜色
                    { offset: 0, color: '#087af7' }, // 100% 处的颜色
                  ],
                  global: false, // 缺省为 false
                },
              },
              label: {
                show: false,
                color: '#4FC3F7',

                position: 'top',
              },
              data: this.ydata1,
            },
            {
              name: '四月',
              type: 'bar',
              barWidth: 20,
              lineStyle: {
                width: 5,
              },
              showBackground: true,
              backgroundStyle: {
                color: '#f5f7f9',
                borderRadius: 2,
              },
              itemStyle: {
                // borderRadius: 10,
                borderWidth: 3,
                borderType: 'solid',
                borderColor: '#f5f7f9',
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 1, color: '#aee3d9' }, // 0% 处的颜色
                    { offset: 0, color: '#4dc8ad' }, // 100% 处的颜色
                  ],
                  global: false, // 缺省为 false
                },
              },
              label: {
                show: false,
                color: '#91CC75',
                position: 'top',
              },
              data: this.ydata2,
            },
          ],
        }
        // 使用刚指定的配置项和数据显示图表。
        this.jytjChart.setOption(option)
        window.onresize = () => {
          this.jytjChart.resize()
        }
      },

2.适配大屏布局修改

1.代码实现

   open3() {
        // console.log("图表在加载")

        // console.log('获取的高度', echarts)
        this.data3 = this.$echarts.init(document.getElementById('myecharts1'))
        const that = this
        // 指定图表的配置项和数据

        const fize = that.fontSize(16)
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },

            // formatter: function (params) {
            //   let result = `${params[0].name}<br>` // 标题（x 轴值）
            //   params.forEach(function (item) {
            //     result += `${item.marker} ${item.seriesName}   ${item.value} %<br>` // 模板字符串
            //   })
            //   return result
            // },
          },
          legend: {
            show: false,
          },
          grid: {
            top: '-1%',
            left: '3%',
            right: fize * 4,
            bottom: '-1%',
            containLabel: true,
          },
          xAxis: {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              fontFamily: 'YourFont, Arial, sans-serif', // 显式设置
            },
            splitLine: {
              show: false,
            },

            boundaryGap: [0, 0.01],
          },
          yAxis: {
            type: 'category',

            data: ['济南', '青岛', '烟台', '淄博', '威海'],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: '#fff',
            },
            splitLine: {
              show: false,
            },
          },
          series: [
            {
              name: '办结率',
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: '#1c4473',
                borderRadius: [0, 5, 5, 0],
              },
              barMaxWidth: 8,
              barMinWidth: 8,

              label: {
                show: true,
                position: [fize * 14.4, 0],
                fontSize: fize,
                // fontFamily: 'YouSheBiaoTiHei',
                color: '#fff',
                verticalAlign: 'middle',
                padding: [5, 0, 0, 0],
                formatter: (params) => {
                  return `{a|${params.value}} %`
                },
                rich: {
                  a: {
                    fontSize: fize + 1,
                    color: '#fff',
                    padding: [0, 0, 3, 0],
                    fontFamily: 'YouSheBiaoTiHei',
                  },
                },
              },

              itemStyle: {
                borderRadius: 10,
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: '#04283e ' }, // 0% 处的颜色
                    { offset: 0.6, color: '#01f9fb' }, // 100% 处的颜色
                    { offset: 1, color: '#fffdfe' }, // 100% 处的颜色
                  ],
                  global: false, // 缺省为 false
                },
              },
              data: [96, 89, 75, 72, 68].reverse(),
            },
          ],
        }
        // 使用刚指定的配置项和数据显示图表。
        this.data3.setOption(option)
        this.data3.resize()
        window.onresize = () => {
          this.data3.resize()
        }
        // window.addEventListener('resize', function () {
        //   that.data3.resize()
        // })
      },