柱状图结合折线图

最新推荐文章于 2024-05-20 22:14:20 发布

勇气大爆炸

最新推荐文章于 2024-05-20 22:14:20 发布

阅读量56

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_38260470/article/details/137017268

版权

option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'none', // 默认为直线，可选为：'line' | 'shadow'
            },
            confine: true,
            backgroundColor: 'rgba(255, 255, 255, 0.94)',
            borderWidth: 1,
            borderColor: '#F4F4F4',
            borderRadius: 6,
            boxShadow: '0px 2px 4px rgba(207, 149, 104, 1)',
            padding: 10,
            textStyle: {
              color: '#333',
            },
            formatter: (params) => {
              let str = `<p>${params[0].name}</p>
                        <p><span>${params[2].marker}得分：</span>${params[2].value}</p>
                        <p><span>${params[0].marker}加分：</span>+${params[0].value}</p>
                        <p><span>${params[1].marker}减分：</span>-${params[1].value}</p>`
              return str
            },
          },
          legend: {
            top: 16,
            right: 0,
            itemWidth: 14,
            itemHeight: 8,
            itemGap: 12,
          },
          grid: {
            left: 0,
            right: 0,
            top: 60,
            bottom: 16,
            // 是否显示刻度标签 如果是true 就显示 否则反之
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [],
            axisTick: {
              show: false, //不显示坐标轴刻度
            },
            axisLine: {
              show: false, //不显示坐标轴轴线
            },
            // 坐标轴文字样式
            axisLabel: {
              interval: 0,
              fontSize: 12,
              fontFamily: 'Microsoft YaHei',
            },
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                show: false, //不显示刻度标签
              },
              axisTick: {
                show: false, //不显示坐标轴刻度
              },
              axisLine: {
                show: false, //不显示坐标轴轴线
              },
              splitLine: {
                lineStyle: {
                  // 分隔线颜色，可以设置成单个颜色。
                  // 也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
                  color: '#F4F4F4',
                },
              },
            },
            {
              type: 'value',
              axisLabel: {
                show: false, //不显示刻度标签
              },
              axisTick: {
                show: false, //不显示坐标轴刻度
              },
              axisLine: {
                show: false, //不显示坐标轴轴线
              },
              splitLine: {
                lineStyle: {
                  // 分隔线颜色，可以设置成单个颜色。
                  // 也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
                  color: '#F4F4F4',
                },
              },
            },
          ],
          series: [
            {
              name: '',
              type: 'bar',
              data: [],
              barWidth: 14,
              itemStyle: {
                color: this.$eachrtColor.green,
              },
              label: {
                show: true,
                position: 'inside',
                color: '#333',
                formatter: (params) => {
                  return '+' + params.value
                },
              },
            },
            {
              name: '',
              type: 'bar',
              data: [],
              barWidth: 14,
              barGap: '15%',
              itemStyle: {
                color: this.$eachrtColor.red,
              },
              label: {
                show: true,
                position: 'inside',
                color: '#333',
                formatter: (params) => {
                  return '-' + params.value
                },
              },
            },
            {
              name: '',
              type: 'line',
              yAxisIndex: 1,
              data: [],
              // 拐点样式
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: this.$eachrtColor.blue,
                borderColor: '#fff',
                borderWidth: 2,
              },
              // 折线颜色
              lineStyle: {
                width: 2,
                color: this.$eachrtColor.blue,
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 10,
                color: this.$eachrtColor.blue,
                formatter: (params) => {
                  return '第' + this.echartData[params.dataIndex].level + '名'
                },
              },
            },
          ],
        },