前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >echarts的双y轴显示

echarts的双y轴显示

作者头像
用户4344670
发布2019-08-28 10:46:34
4.7K0
发布2019-08-28 10:46:34
举报
文章被收录于专栏:vue的实战vue的实战
第一步: 引入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();
})
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.04.30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一步: 引入echarts
  • 第二步: id绑定
  • 第三步: 配置options,创建echarts实例
    • 创建element的实例(注意是this.$echarts , 因为是全局引用了)
      • 屏幕的自适应 (实现屏幕的宽度的自适应)
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档