1、下载和第一个例子

网站：https://echarts.apache.org/handbook/zh/basics/import
手册：https://echarts.apache.org/zh/option.html#visualMap
https://echarts.apache.org/handbook/zh/get-started/

安装

  npm install echarts --save

第一个例子

制作组件components/echarts/BarGraph

    <template>
        <div class="echarts-box">
            <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
        </div>
    </template>

    <script setup>
        import * as echarts from "echarts";
        import {onMounted,onUnmounted} from "vue";
        let props = defineProps(["width", "height"])
        let myEcharts = echarts;

        onMounted(() => {
            initChart();
        });

        onUnmounted(() => {
            myEcharts.dispose;
        });

        function initChart() {
            let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
            chart.setOption({
                title: {
                    text: "2021年各月份销售量（单位：件）",
                    left: "center",
                },
                xAxis: {
                    type: "category",
                    data: [
                        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
                    ]
                },
                tooltip: {
                    trigger: "axis"
                },
                yAxis: {
                    type: "value"
                },
                series: [{
                    data: [
                        606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
                    ],
                    type: "line",
                    smooth: true,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: "top",
                                formatter: "{c}"
                            }
                        }
                    }
                }]
            });
            window.onresize = function() {
                chart.resize();
            };
        }
    </script>

使用组件

    <template>
      <bar-graph :width="'900px'" :height="'600px'"></bar-graph>
    </template>

    <script setup>
    import BarGraph from "@/components/echarts/BarGraph";
    </script>

程序解释
1，导入 echarts
import * as echarts from "echarts";

通常来说，在哪里实现就在哪里导入，而不是在 main.js 里面全局引入。

2，接收 props
通过 props 接收父组件传入的控制值，这种不写死的方式增加了数据展示大小的灵活性，

3，初始化 echarts
首先以调用 echarts.init() 的方式创建一个 echarts 实例。
这里我们指定了实例容器以及所用的主题。

然后调用 echartsInstance.setOption() 来设置图表实例的配置项以及数据，详见配置项手册。
1，通过 title 设置了图表的标题。
2，通过 xAxis 设置了直角坐标系中的 x 轴。
3，通过 yAxis 设置了直角坐标系中的 y 轴。
4，通过 tooltip 设置了提示框组件。
5，通过在 series 内部的 type 设置图例为柱状图，data 填充数据内容。

初始化工作是在组件的 setup 中完成的。