echarts实现刻度尺

1.  
   //刻度尺
2.  
   progressChart() {
3.  
   let myEcharts = echarts.init(this.$refs.progressChart);
4.  
   var option = {
5.  
   grid: {
6.  
   left: "1%",
7.  
   right: "60%",
8.  
   top: "10px",
9.  
   bottom: "30px",
10.  
    containLabel: true,
11.  
    },
12.  
    xAxis: {
13.  
    type: "category",
14.  
     
15.  
    boundaryGap: true,
16.  
    show: false,
17.  
    },
18.  
    yAxis: {
19.  
    min: 1,
20.  
    max: 200,
21.  
    splitNumber: 6,
22.  
    type: "value",
23.  
    // 刻度线
24.  
    axisTick: {
25.  
    show: true,
26.  
    length: 4,
27.  
    lineStyle: {
28.  
    color: "#fff",
29.  
    },
30.  
    },
31.  
     
32.  
    axisLine: {
33.  
    show: true,
34.  
    lineStyle: {
35.  
    color: "#fff",
36.  
    },
37.  
    },
38.  
    splitLine: {
39.  
    show: false,
40.  
    },
41.  
    axisLabel: {
42.  
    show: true,
43.  
    color: "#fff",
44.  
    // formatter: function(v) {
45.  
    // let item = "";
46.  
    // if (v === 1) {
47.  
    // item = "1";
48.  
    // } else if (v === 2) {
49.  
    // item = "2";
50.  
    // } else if (v === 5) {
51.  
    // item = "5";
52.  
    // } else if (v === 10) {
53.  
    // item = "10";
54.  
    // } else if (v === 20) {
55.  
    // item = "20";
56.  
    // } else if (v === 50) {
57.  
    // item = "50";
58.  
    // }
59.  
    // return item;
60.  
    // },
61.  
    },
62.  
    },
63.  
    series: [
64.  
    {
65.  
    data: [20],
66.  
    type: "bar",
67.  
    barWidth: 10,
68.  
    itemStyle: {
69.  
    color: "#00ff00",
70.  
    },
71.  
    },
72.  
    ],
73.  
    };
74.  
    myEcharts.setOption(option);
75.  
    },

这篇好文章是转载于：学新通技术网