首页 大杂烩正文

vueeCharts进程条

原创
小哥 3年前 (2022-11-10) 阅读数 50 #大杂烩

vue eCharts进度条

1.在vue项目里面



import * as echarts from "echarts";

let myDoubtBankListEcharts3 = echarts.init(
        document.getElementById("myDoubtBankListEcharts3")
      );
      let ratioNumber = [80];
      ratioNumber = [this.doubtHandVO.doubtHandProgress];
      myDoubtBankListEcharts3.setOption({
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        backgroundColor: "transparent",
        // xAxis: {
        //     show: false,
        //     type: value,
        //     max: 100,
        // },
        xAxis: [
          {
            type: "value",
            axisLabel: {
              margin: 5,
              color: "#fff",
              formatter: function (val) {
                return val + "";
              },
              textStyle: {
                fontSize: "0",
              },
            },
            min: 0,
            max: 100, // 计算最大值
            // interval: max / 5, //  平均分为5份
            splitNumber: 15,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                width: 1,
                opacity: 0.3,
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            axisLabel: {
              show: false,
            },
            min: 0,
            max: 100, // 计算最大值
            interval: 100 / 10, //  平均分为5份
            splitNumber: 10,
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#D8D8D8",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: false,
              textStyle: {
                fontSize: "12",
                color: "#03fcfe",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: ["比率"],
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: false,
            data: ratioNumber, //80
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 0,
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: true,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "rgb(25, 142, 248)",
                fontSize: "16",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgb(25, 142, 248)",
              },
            },
            barWidth: 20,
            data: ratioNumber, //80
            z: 12212,
          },
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 1,
            barGap: "-100%",
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: false,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgba(215, 236, 255,.4)",
              },
            },
            barWidth: 20,
            data: [100],
            z: 12210,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myDoubtBankListEcharts3.resize();
      });

2.在echarts调试-代码编辑

let ratioNumber = [80];

     option = {
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        backgroundColor: "transparent",
        // xAxis: {
        //     show: false,
        //     type: value,
        //     max: 100,
        // },
        xAxis: [
          {
            type: "value",
            axisLabel: {
              margin: 5,
              color: "#fff",
              formatter: function (val) {
                return val + "";
              },
              textStyle: {
                fontSize: "0",
              },
            },
            min: 0,
            max: 100, // 计算最大值
            // interval: max / 5, //  平均分为5份
            splitNumber: 15,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                width: 1,
                opacity: 0.3,
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            axisLabel: {
              show: false,
            },
            min: 0,
            max: 100, // 计算最大值
            interval: 100 / 10, //  平均分为5份
            splitNumber: 10,
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#D8D8D8",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: false,
              textStyle: {
                fontSize: "12",
                color: "#03fcfe",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: ["比率"],
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: false,
            data: ratioNumber, //80
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 0,
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: true,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "rgb(25, 142, 248)",
                fontSize: "16",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgb(25, 142, 248)",
              },
            },
            barWidth: 20,
            data: ratioNumber, //80
            z: 12212,
          },
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 1,
            barGap: "-100%",
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: false,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgba(215, 236, 255,.4)",
              },
            },
            barWidth: 20,
            data: [100],
            z: 12210,
          },
        ],
      };

    myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });

3.在echarts调试-完整代码

import * as echarts from echarts;

var chartDom = document.getElementById(main);
var myChart = echarts.init(chartDom);
var option;

let ratioNumber = [80];

option = {
  grid: {
    left: 5%,
    right: 5%,
    bottom: 5%,
    top: 10%,
    containLabel: true
  },
  backgroundColor: transparent,
  // xAxis: {
  //     show: false,
  //     type: value,
  //     max: 100,
  // },
  xAxis: [
    {
      type: value,
      axisLabel: {
        margin: 5,
        color: #fff,
        formatter: function (val) {
          return val + ;
        },
        textStyle: {
          fontSize: 0
        }
      },
      min: 0,
      max: 100, // 计算最大值
      // interval: max / 5, //  平均分为5份
      splitNumber: 15,
      splitLine: {
        show: false,
        lineStyle: {
          color: #fff
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: #fff,
          width: 1,
          opacity: 0.3
        }
      },
      axisTick: {
        show: false
      }
    },
    {
      type: value,
      axisLabel: {
        show: false
      },
      min: 0,
      max: 100, // 计算最大值
      interval: 100 / 10, //  平均分为5份
      splitNumber: 10,
      splitLine: {
        show: false,
        lineStyle: {
          type: dashed,
          color: #D8D8D8
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: #fff
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: category,
      inverse: true,
      axisLabel: {
        show: false,
        textStyle: {
          fontSize: 12,
          color: #03fcfe
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: [比率]
    },
    {
      type: category,
      inverse: true,
      axisTick: none,
      axisLine: none,
      show: false,
      data: ratioNumber //80
    }
  ],
  series: [
    {
      type: bar,
      showBackground: false,
      xAxisIndex: 0,
      backgroundStyle: {
        color: transparent,
        borderRadius: 30,
        z: 1212
      },
      label: {
        show: true,
        position: right,
        formatter: {@score}%,
        textStyle: {
          color: rgb(25, 142, 248),
          fontSize: 16
        }
      },
      itemStyle: {
        normal: {
          borderRadius: 20,
          color: rgb(25, 142, 248)
        }
      },
      barWidth: 20,
      data: ratioNumber, //80
      z: 12212
    },
    {
      type: bar,
      showBackground: false,
      xAxisIndex: 1,
      barGap: -100%,
      backgroundStyle: {
        color: transparent,
        borderRadius: 30,
        z: 1212
      },
      label: {
        show: false,
        position: right,
        formatter: {@score}%,
        textStyle: {
          color: #fff,
          fontSize: 12
        }
      },
      itemStyle: {
        normal: {
          borderRadius: 20,
          color: rgba(215, 236, 255,.4)
        }
      },
      barWidth: 20,
      data: [100],
      z: 12210
    }
  ]
};

myChart.setOption(option);
window.addEventListener(resize, function () {
  myChart.resize();
});

option && myChart.setOption(option);

4，关于echarts安装和使用

请参阅我的另一篇文章：
https://blog.csdn.net/ingenuou_/article/details/123179231?spm=1001.2014.3001.5502

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

上一篇：453.最小操作时间使数组对象相等(javascript)453.MinimumMovestoEqualArrayElements 下一篇：直指OfferII003.前n个数字二进位中1的长度
相关文章
小哥

小哥

作者文章
浏览更多
热门
最新文章
标签列表
粤ICP备19068341号
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除
Powered By Z-BlogPHP Theme By 编程老白