vue折线图和柱状图混合,贴个配置option。有需要自取

直接放代码吧~:
还是先放个图吧,省的相不中了。_。这个是两个柱和一个折线。那个柱没有数据所以没显示。
折线图
贴个使用方式:

this.option.xAxis[0].data = res.data.days;
this.option.series[0].data = res.data.total;
this.option.series[1].data = res.data.sell;
this.option.series[2].data = res.data.count;
this.$nextTick(() => {
  this.initChart();
  window.addEventListener('resize', this.wsFunc);
});
wsFunc() {
  this.myChart.resize();
},

下面是配置代码:

option: {
        tooltip: {
          trigger: 'axis',
        },
        toolbox: {},
        legend: {
          data: ['订单金额', '订单实收', '订单数'],
        },
        color: ['#1495EB', '#00CC66', '#F9D249', '#ff9900', '#9860DF'],
        grid: {
          left: 16,
          right: 25,
          bottom: 10,
          top: 40,
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#D7DDE4',
              },
            },
            axisTick: {
              alignWithLabel: true,
              lineStyle: {
                color: '#D7DDE4',
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#F5F7F9',
              },
            },
            // axisPointer: {
            //     type: 'shadow'
            // },
            axisLabel: {
              interval: 0,
              rotate: 40,
              textStyle: {
                color: '#7F8B9C',
              },
            },
            data: [],
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#7F8B9C',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#F5F7F9',
              },
            },
          },
          {
            type: 'value',
            name: '数量',
            minInterval: 1,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#7F8B9C',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#F5F7F9',
              },
            },
            // axisLabel: {
            //     formatter: '{value} °C'
            // }
          },
        ],
        series: [
          {
            name: '订单金额',
            type: 'bar',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#69cdff',
                    },
                    {
                      offset: 0.5,
                      color: '#3eb3f7',
                    },
                    {
                      offset: 1,
                      color: '#1495eb',
                    },
                  ],
                },
              },
            },
            data: [],
          },
          {
            name: '订单实收',
            type: 'bar',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#fab2ff',
                    },
                    {
                      offset: 1,
                      color: '#1904e5',
                    },
                  ],
                },
              },
            },
            data: [],
          },
          {
            name: '订单数',
            type: 'line',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#6fdeab',
                    },
                    {
                      offset: 0.5,
                      color: '#44d693',
                    },
                    {
                      offset: 1,
                      color: '#2cc981',
                    },
                  ],
                },
              },
            },
            data: [],
            yAxisIndex: 1,
          },
        ],
      },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值