echarts的双y轴显示

第一步： 引入echarts

代码语言：javascript复制

import echarts from "echarts";
Vue.prototype.$echarts = echarts //引入组件（全局引入）

第二步： id绑定

代码语言：javascript复制

      <div id="pie">  /// pie 用于存放所要绘制的图形

第三步： 配置options，创建echarts实例

代码语言：javascript复制

   option1: {
          title: {
            text: "双坐标轴事例", //标题
            show: false //是否显示标题
          },
          tooltip: {
            //  气泡
            trigger: "axis",
            formatter: "{b}<br/>{a0}:{c0} <br/>{a1}：{c1}", //b为数据名；a0,a1为系列名，c0为y轴左侧数据，c1为右侧
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            //图例
            data: ["成功数量", "失败数量"],
            // 图例的位置 通过定位来确定
            bottom: 0 // 图例显示的位置
          },
          xAxis: {
            type: "category",
            data: [ ]
          },
          yAxis: [   // 双y轴显示
            {
              type: "value",
              name: "成功数量", //  y轴文字提示
              axisLabel: {
                formatter: "{value} ",
              },
              // y轴样式  颜色
              axisLine: {
                lineStyle: {
                  color: "#ff1717"
                }
              },

              ///  //网格线   设置为虚线
              splitLine: {
                lineStyle: {
                  type: "dashed" //设置网格线类型 dotted：虚线   solid:实线
                },
                show: true //隐藏或显示
              }
              //
            },
            {
              type: "value",
              name: "失败数量",
              axisLabel: {
                formatter: "{value} "
              },
              // y轴样式
              axisLine: {
                lineStyle: {
                  color: "#2d7fff"
                }
              },

              ///
              splitLine: {
                //网格线
                lineStyle: {
                  type: "dashed" //设置网格线类型 dotted：虚线   solid:实线
                },
                show: true //隐藏或显示
              }
              //
            }
          ],
          series: [
            {
              symbol: "none",
              smooth: true, /// 是否曲线平滑
              name: "成功数量",
              type: "line", //柱状图
              // data: [5, 20, 36, 10, 10, 20, 100, 20, 30, 50],
              data: [],

              symbol: "circle", //折线点设置为实心点
              symbolSize: 4, //折线点的大小
              itemStyle: {
                normal: {
                  color: "#ff1717" /// 折线点的颜色
                },
                lineStyle: {
                  color: "red" ///　折线的颜色
                }
              }
            },
            {
              symbol: "none",
              smooth: true, /// 是否曲线平滑

              name: "失败数量",
              type: "line", //线形图
              yAxisIndex: "1", //使坐标轴在右侧显示，当有多个坐标轴时，数字依次增大，可建立多个Y轴
              // data: [0, 300, 80, -72, 0, 100, 20],
              data: [],
              symbol: "circle", //折线点设置为实心点
              symbolSize: 4, //折线点的大小
              itemStyle: {
                normal: {
                  color: "#2d7fff" /// 折线点的颜色
                },
                lineStyle: {
                  color: "#2d7fff" ///　折线的颜色
                }
              }
            }
          ]
        },

创建element的实例（注意是this.$echarts ， 因为是全局引用了）

代码语言：javascript复制

    pie() {
        var myChart = this.$echarts.init(document.getElementById("pie"));
        myChart.setOption(this.option);
        myChart.resize();
      },

屏幕的自适应 (实现屏幕的宽度的自适应)

代码语言：javascript复制

window.onresize = (() => {
this.pie();
})

echarts element 配置

0 人点赞