vue中echart图表y轴左边数值,右边百分比

在这里插入图片描述
实现代码如下(有注解解释):

 //bar
 export default {
    getBarData() {
      let getBar = echarts.init(document.getElementById("bar"));
      var option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "正确数", "错误数"],
            ["网络安全", 43.3, 85.8, 93.7],
            ["消防安全", 83.1, 73.4, 55.1],
            ["交通安全", 86.4, 65.2, 82.5],
            ["心理健康", 72.4, 53.9, 39.1],
            ["食品安全", 43.3, 85.8, 93.7],
            ["校规校纪", 43.3, 85.8, 93.7],
            ["人身安全", 43.3, 85.8, 93.7],
          ],
        },
        xAxis: { type: "category" },
        yAxis: [
          {
            type: "value",
            name: "题目数量", //y坐标轴的名字
            splitLine: {
              //显示分割线
              show: false,
            },
          },
          {
            type: "value",
            name: "正确率",
            position: "right",
            min: 0,
            max: 25, //控制百分比的最大最小数值
            axisLabel: {
              formatter: "{value}%", //使图变成百分比形式
            },
            splitLine: {
              //网格线显不显示
              show: false,
            },
          },
        ],
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: "bar", //柱形图(可添加多个)
            name: "正确数",
            data: [200, 230, 250, 300, 350, 250, 300],
          },
          {
            type: "bar",
            name: "错误数",
            data: [345, 340, 300, 400, 400, 250, 300], //data写5个就是从0,到bar最高值分配5份,0 100 200 300 400,中间数据是柱高度
          },
          {
            name: "正确率", //颜色标注的名字
            type: "line", //还可以在一个图上加入折线图
            yAxisIndex: 1, //索引从0开始
            data: [10, 4, 15, 11, 13, 12, 25],
          },
        ],
      };
      getBar.setOption(option);
      window.addEventListener("resize", function () {
        getBar.resize();
      });
    },
   }
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值