echarts的一些技巧

echarts的一些技巧

自适应echart组件封装

<template>
    <div class="chart-container">
        <div
            ref="chartRef"
            style="width: 100%"
            :style="{
                height: height + 'px'
            }"
        >div>
    div>
template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, markRaw, toRefs, watch, ref, unref, nextTick } from 'vue';

const emit = defineEmits(['chartClick']);
const props = defineProps({
    option: {
        type: Object,
        default: {}
    },
    height: {
        type: Number,
        default: 250
    }
});
const { option, height } = toRefs(props);
const chartObj = ref({});
const chartRef = ref(null);

const handleChartClick = params => {
    console.log('handleChartClick');
    console.log(params);
    emit('chartClick', params);
};

const init = () => {
    chartObj.value.clear();
    chartObj.value.setOption(unref(option));
};

const initDrawObj = () => {
    chartObj.value = echarts.init(chartRef.value);

    init();
    chartObj.value.on('click', handleChartClick);
    window.addEventListener('resize', () => {
        nextTick(() => {
            chartObj.value.resize();
        });
    });

    // window.addEventListener('orientationchange', () => {
    //     nextTick(() => {
    //         chartObj.value.resize();
    //     });
    // });
};

onMounted(() => {
    nextTick(() => {
        initDrawObj();

        watch(option, () => {
            init();
        });
    });
});

defineExpose({
    init,
    initDrawObj
});
script>

<style scoped>
.chart-container {
    /*border: 1px solid black;*/
    width: 100%;
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

series data技巧

  const newCategorySegmentOption = {
        grid: [{ left: '22%', top: '0%', width: '90%', height: '80%' }],
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category'
            // data: ['规划项目', '产品交付项目', '技术研发项目', '市场项目', '维护项目']
        },
        color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf'],
        series: [
            {
                data: [
                    {
                        value: [25, '规划项目'],
                        itemStyle: {
                            color: '#dd536b'
                        }
                    },
                    {
                        value: [25, '产品交付项目'],
                        itemStyle: {
                            color: '#9462e5'
                        }
                    },
                    {
                        value: [33, '技术研发项目'],
                        itemStyle: {
                            color: '#a6a6a6'
                        }
                    },
                    {
                        value: [22, '市场项目'],
                        itemStyle: {
                            color: '#e1bb22'
                        }
                    },
                    {
                        value: [23, '维护项目'],
                        itemStyle: {
                            color: '#0f78f4'
                        }
                    }
                ],
                type: 'bar'
            }
        ]
    };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

设置颜色的技巧

itemStyle: {
    normal: {
        //这里是循环开始的地方
        color: function(params) {
            var colorList = ['#C6D0D3', '#92CDBB', '#EDD977', '#E89F6A']
            if (params.dataIndex >= colorList.length) {
                params.dataIndex = params.dataIndex - colorList.length
            }
            return colorList[params.dataIndex]
        },
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

统计图Y轴（或X轴）文字过长问题解决

固定宽度换行

const option = {
    yAxis: {
        type: 'category',
        axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
                color: '#fff',
                fontSize: '12'
            },
            formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 10;  //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                        var tempStr = "";
                        var start = p * provideNumber;
                        var end = start + provideNumber;
                        if (p == rowNumber - 1) {
                            tempStr = params.substring(start, paramsNameNumber);
                        } else {
                            tempStr = params.substring(start, end) + "\n";
                        }
                        newParamsName += tempStr;
                    }

                } else {
                    newParamsName = params;
                }
                return newParamsName
            },
        },
        // y轴的颜色和宽度
        axisLine: {
            lineStyle: {
                color: '#107D9F',
                width: 1,   //这里是坐标轴的宽度,可以去掉
            }
        },
        data: ['射线装置、放射源或者 非密封放射性物质豁免 备案证明', '全省环境质量信息服务', '辐射安全许可', '放射性同位素转让审批', '建设项目环境影响评价 报告书审批（省级）', '危险废物转移跨省审批', '危险废物经营许可证', '核与辐射类建设项目环境影响评价报告表的审批（省级）']
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44