echarts 柱状图

记录echarts 柱状图基础案例以及相关配置。

1.基础柱状图

    const myChart = this.$echarts.init(this.$refs.echartsZx);
    const option = {
      title: {
        text: '本周考试记录'
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    }
    // 绘制图表
    myChart.setOption(option);

2.背景色的柱状图

    const myChart = this.$echarts.init(this.$refs.echartsZx);
    const option = {
      title: {
        text: '本周考试记录'
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true, //是否显示柱条的背景色
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)', //柱条的颜色
            borderColor: "rgba(208, 38, 38, 1)", //柱条的描边颜色
            // borderWidth:1,//柱条的描边宽度，默认不描边。
            // borderType:'dashed',//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
            borderRadius: 0//圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
          }
        }
      ]
    }
    // 绘制图表
    myChart.setOption(option);

3.条形图

    // 基于准备好的dom，初始化echarts实例
    const myChart = this.$echarts.init(this.$refs.echartsZx);
    const option = {
      title: {
        text: '本周考试及格表'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        //给提示框提示数据加单位
        formatter: (params) => {
          console.log(params);
          var relVal = params[0].name
          for (var i = 0, l = params.length; i < l; i++) {
            relVal += '<br/>' + params[i].seriesName + ' ' + params[i].marker + ' ' + params[i].value + ' %'
          }
          return relVal
        },
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: this.dataList.map(item => item.name)
      },
      series: [
        {
          name: '及格',
          type: 'bar',
          data: this.dataList.map(item => item.hege)
        },
        {
          name: '不及格',
          type: 'bar',
          data: this.dataList.map(item => item.buhege)
        }
      ]
    }
    // 绘制图表
    myChart.setOption(option);

4.折柱混合图

    // 基于准备好的dom，初始化echarts实例
    const myChart = this.$echarts.init(this.$refs.echartsZx);
    const option = {
      title:{
        text:'折柱混合',
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross', //指示器类型。
          crossStyle: {
            color: '#999' //axisPointer.type 为 'cross' 时有效。
          }
        }
      },
      //工具栏
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ['Precipitation', 'Temperature']
      },
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: 'Precipitation',
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
            formatter: '{value} ml'
          }
        },
        {
          type: 'value',
          name: 'Temperature',
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: '{value} °C'
          }
        }
      ],
      series: [
        {
          name: 'Precipitation',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value + ' ml';
            }
          },
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
          ]
        },
        {
          name: 'Temperature',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' °C';
            }
          },
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
      ]
    };
    // 绘制图表
    myChart.setOption(option);