zoukankan      html  css  js  c++  java
  • echar图柱状图和折线图混合加双侧y轴坐

     

    代码如下:

        floorSalesBar(){//方法名====这个方法应该放在methods中在mounted中调用
    methods
          let _this = this;
    let myChart = _this.$echarts.init(document.getElementById('floorSales'));

    let option = {
    color:['#ff6100','#ffa836','#d9822a'],

    legend: {
    data: ['销售', '同比', '环比']
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    xAxis: {
    type: 'category',
    boundaryGap: true,
    data: ['L3', 'L6', 'L5', 'L11', 'L19', 'L4', 'L9']
    },
    yAxis: [//这里两个坐标轴,因为下面用的数据有柱状图和折线图,而他们的一个是数值,一个是百分比因此数的范围不一样,因此这里要加入id来定义坐标轴的标记下面 yAxisIndex相对应其标记号就可以取这个坐标轴线了
    {
    name: '销售',
    type: 'value',
    id:0,
    max: 500
    },
    {
    name: '%',
    nameLocation: 'end',
    max: 100,
    id:1,
    type: 'value',
    }
    ],
    series: [
    {
    name: '销售',
    type: 'bar',
    barMaxWidth:25,//柱状图的宽度
    yAxisIndex:0,//对应y轴的那一组坐标
    label:{
    show:true,
    position:'insideTop'//柱状图上文字的位置
    },
    itemStyle:{
    barBorderRadius: [7, 7, 0, 0]//柱状图的边框
    },
    data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
    name: '同比',
    type: 'line',
    yAxisIndex:1,
    data: [20, 18, 11, 34, 90, 33, 10]
    },
    {
    name: '环比',
    type: 'line',
    yAxisIndex:1,
    data: [50, 32, 21, 15, 90, 30, 40]
    }
    ]
    };

    window.onresize = function () {
    myChart.resize();
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    }
    }
    }
  • 相关阅读:
    Leetcode 70 Climbing Stairs 递推
    Leetcode 83 Remove Duplicates from Sorted List 链表
    Leetcode 328 Odd Even Linked List 链表
    Leetcode 206 Reverse Linked List 链表
    Spring中注解
    SpringMVC配置文件
    java设计模式----单例模式
    java设计模式----工厂方法模式
    java设计模式----装饰者模式
    java设计模式----观察者模式
  • 原文地址:https://www.cnblogs.com/whdaichengxu/p/12575232.html
Copyright © 2011-2022 走看看