web端使用echarts绘制图表示例（柱状图），包括自定义工具

<template>
    <div id="barChart"></div>
</template>
<style lang="scss" scoped>
#barChart {
    width: 99%;
    margin: 0 auto;
    height: 300px;
}
</style>
<script setup>
import * as echarts from "echarts";
import { watchEffect, reactive } from "vue";
const emit = defineEmits(['handle_export'])
const props = defineProps(['echartsData']);
const dataOwn = reactive({
    echartsData: {},
})

const markCharts = () => {
    var chartDom = document.getElementById("barChart");
    var myChart = echarts.init(chartDom);
    myChart.on("click", function (params) {
        console.log("params柱状线索->", params);
        emit("handle_related_list", 'cluebusiness', params.name,3);
    })
    var option;
    window.addEventListener("resize", () => {//监听浏览器窗口大小
        myChart.resize();
    });
    option = {
        title: {
            text: '预计签单时间'
        },
        toolbox: {
            feature: {
                dataView: {
                    show: true,
                    readOnly: false,
                    // lang: ["数据视图", "关闭", "导出Excel"], // 这里将刷新改成其他用途

                    optionToContent: function (opt) {
                        var axisData = opt.xAxis[0].data; //坐标轴
                        var series = opt.series; //折线图的数据
                        var tdHeads =
                            '<td  style="margin-top:10px; padding: 10px 15px">时间</td><td  style="margin-top:10px; padding: 10px 15px">数量</td>'; //表头
                        var tdBodys = "";
                        series.forEach(function (item) {
                            // tdHeads += `<td style="padding:5px 15px">${item.name}</td>`;
                        });
                        var table = `<table border="1" style="width:90%;   margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" id="table-content"><tbody><tr>${tdHeads} </tr>`;
                        for (var i = 0, l = axisData.length; i < l; i++) {
                            for (var j = 0; j < series.length; j++) {
                                if (series[j].data[i] == undefined) {
                                    tdBodys += `<td>${"-"}</td>`;
                                } else {
                                    tdBodys += `<td>${series[j].data[i]}</td>`;
                                }
                            }
                            table += `<tr><td style="padding: 15px 20px">${axisData[i]}</td>${tdBodys}</tr>`;
                            tdBodys = "";
                        }
                        table += "</tbody></table>";
                        return table;
                    },
                    // contentToOption: function () {
                    //     xlsxToExcel('#clueLineChart','线索数量变化趋势')
                    // },
                },
                myTool: {
                    title: '导出',
                    icon: 'image://https://www.bio-cloud.com.cn:8022/icon/download.svg',
                    onclick: function () {
                        emit("handle_export", 'cluebusiness', 3)
                    }
                },
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c}'
        },
        xAxis: {
            type: 'category',
            data: dataOwn.echartsData.complete_time_data.time,
            axisLabel:{
                interval:0
            }
        },
        yAxis: {
            type: 'value'
        },
        series: dataOwn.echartsData.complete_time_data.data
    };

    option && myChart.setOption(option);

};
watchEffect(() => {
    if (props.echartsData) {
        dataOwn.echartsData = props.echartsData;
        console.log("dataOwn.echartsData->", dataOwn.echartsData);
        if (dataOwn.echartsData) {
            setTimeout(() => {
                markCharts();
            }, 500);
        }
    }
})
</script>

echarts中文文档