echarts常见问题

• 1添加两个y轴，求解二y轴不工作
• • 1.1当两页y轴，第二个不出现时，需要在
• 2.滚动条基于xData多少数据，显示滚动条比例
• 3.echarts随页面更改resize

1添加两个y轴，求解二y轴不工作

1.1当两页y轴，第二个不出现时，需要在

在series
y轴需要写两个
第一个y数据 yAxisIndex:0, 第二个y数据 yAxisIndex:1,

 yAxis: [
          {
            type: "value",
            //  position:left,
              show: true,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgb(187, 179, 179)",
                // type: dashed,
                type: [15, 10],
                dashOffset: 5,
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#000",
              fontSize: 15,
            },
            splitArea: {
              show: false,
            },
          },
           {
            type: "value",
            //  position:left,
              show: true,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgb(187, 179, 179)",
                // type: dashed,
                type: [15, 10],
                dashOffset: 5,
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#000",
              fontSize: 15,
            },
            splitArea: {
              show: false,
            },
          },

        ],

 series: [
          {
            name: "未结案件",
            type: "bar",
            // "stack": "总量",
            barMaxWidth: 20,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: "rgb(86, 223, 191)",
              },
            },
            data: OpenCaseYdata,
            yAxisIndex :0,
          },
             {
            name: "未结案件",
            type: "bar",
            // "stack": "总量",
            barMaxWidth: 20,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: "rgb(86, 223, 191)",
              },
            },
            data: OpenCaseYdata,
            yAxisIndex :1,
          },
          ]

2.滚动条基于xData多少数据，显示滚动条比例

      xData = xData.concat(xData)
      completedData= completedData.concat(completedData)
      ongoingData = ongoingData.concat(ongoingData)
      slowData = slowData.concat(slowData)
      console.log("(10 / xData.length) * 100",(10 / xData.length) * 100);

数据小于10，滚动条比率100，
数据大于10，滚动条比率根据数据来定

 end: xData.length <= 10 ? 100 : (10 / xData.length) * 100,//滚动条的比例。60%

 dataZoom: [
          {
            show: true,
            height: 3,
            xAxisIndex: [0],
            bottom: "1%",
            start: 0,//初始化从哪里开始
            end: xData.length <= 10 ? 100 : (10 / xData.length) * 100,//滚动条的比例。60%
            // end: 60,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#000",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            zoomOnMouseWheel:false,  //滚筒是否触发缩放
            height: 15,
            start: 1,
            end: 35,
          },
        ],

3.echarts随页面更改resize

id=“legal2”

import echarts from "echarts";
export default {
  name: "twoGoldVoltageDrop",
  // import引入的组件需要注入到要使用的对象中。
  components: { echarts },
  methods: {
    legal2() {
      let legal2 = echarts.init(document.getElementById("legal2"));
      legal2.setOption({})
      window.addEventListener("resize", function () {
        legal2.resize();
      });
    }
 }
}

 window.addEventListener("resize", function () {
        legal2.resize();
      });