echarts 柱状图记录

 

 1     let option = {
 2         title: {
 3             text: '巡查完成情况',
 4         },
 5         toolbox: {
 6             show: true,
 7             feature: {
 8                 dataZoom: {
 9                     yAxisIndex: "none"
10                 },
11                 dataView: {
12                     readOnly: false
13                 },
14                 magicType: {
15                     type: ["line", "bar"]
16                 },
17                 restore: {},
18                 saveAsImage: {}
19             }
20         },
21         tooltip: {
22             trigger: 'axis',
23             axisPointer: { // 坐标轴指示器，坐标轴触发有效
24                 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
25             },
26 
27         },
28         xAxis: {
29             type: 'category',
30             data: x,
31             axisTick: {
32                 show: false,
33                 alignWithLabel: true
34             },
35             axisLabel: {
36                 interval: 0,
37                 //rotate: 40,
38                 // formatter: function (value) {
39                 //     return value.split("").join("\n");
40                 // }
41             }
42 
43         },
44         yAxis: {
45             type: 'value',
46             name: '巡查完成率',
47             axisLabel: {
48                 show: true,
49                 formatter: '{value} %'
50             },
51             axisLine: {
52                 show: true
53             },
54             splitLine: {
55                 interval: 2,
56                 show: true,
57                 lineStyle: {
58                     type: "dashed",
59                     width: 1,
60                     color: "rgba(0, 0, 0, 0.62)"
61                 }
62             }
63         },
64         grid: {
65             left: '3%',
66             right: '4%',
67             bottom: '3%',
68             containLabel: true
69         },
70         series: [{
71             data: y,
72             type: 'bar',
73             showBackground: true,
74             barWidth: '30%',
75             itemStyle: {
76                 color: "rgba(136, 136, 225, 1)"
77             },
78         }]
79     };

 

横向柱状图

 const option = {
        title: {
            text: '病害类型TOP10',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            show: false,
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: x,//['巴西', '印尼', '美国', '印度', '中国', '世界', '日本', '韩国', '英国'],
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                inside:true,
                margin:0,
                verticalAlign: "top",
                padding: [-15, 0, 0, 0]
            },
        },
        series: [
            {
                name: '病害数量',
                type: 'bar',
                data: num,//[50, 70, 90, 20, 40, 80, 10, 30, 60],
                barWidth: '7%',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(80, 180, 150, 0.3)'
                },
                label: {
                    show: true,
                    formatter: params => {
                        return params.value + "/" + percent[params.dataIndex]
                    }
                },
                labelLayout(params) {
                    return {
                        x: '95%',
                        y: params.rect.y - 1.5*params.rect.height,
                        verticalAlign: 'middle',
                        align: 'right'
                    }
                }
            },
        ],
        visualMap: {
            show: false,
            max: max,
            dimension: 0,
            inRange: {
                color: ["#67C23A", "#E6A23C", "#F56C6C"]
            }
        },
    };

 

echarts.setOption(option,notMerge) 

option为配置项

notMerge 为Boolean true为重新加载option;   false为合并配置项;  默认false

posted @ 2021-05-13 14:18  你真有趣  阅读(56)  评论(0)    收藏  举报