使用步骤

1. 安装

npm i echarts

2. 引入 (局部/全局)

import * as echarts from "echarts"

3. 创建echart Dom节点 给元素宽高

var chartDom = document.getElementById("main") // 创建

var myChart = echarts.init(chartDom) // 初始化

4. 抄代码到mounted钩子中（选用哪个hook请自己明确）

一些细枝末节问题

var option = {
        // 折线图标题
        title: {
          text: "这里是折线图标题",
        },
        // 是否显示小框框 鼠标移动上去的显示
        tooltip: {
          trigger: "axis",
        },
        // 对数据显示的解释标准
        legend: {
          data: ["数据title1", "数据title2", "数据title3", "数据title4"]},
        // 组件距离容器的距离
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },

        // x坐标
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },

        // y坐标 type属性只有一种 - value  value显示的横坐标对应的数值
        yAxis: {
          type: "value",
        },
        // 重点 是一个数组 数组里面有很多对象
        series: [
          {
            name: "数据title1",
            type: "line",
            stack: "Total",
            data: [...数据1],
          },
          {
            name: "数据title2",
            type: "line",
            stack: "Total",
            data: [...数据2],
          },
          {
            name: "数据title3",
            type: "line",
            stack: "Total",
            data: [...数据3],
          },
          {
            name: "数据title4",
            type: "line",
            stack: "Total",
            data: [...数据4],
          },
        ],
      };

使用配置项

option && myChart.setOption(option);

echarts修改四周间距问题（以及小小封装一下echarts）

在配置项中修改grid,顺便对echats做了一个简简单单的封装。

import { Time } from '../../shared/time'
import { getMoney } from '../../shared/Money'

const echartsOption = {
  tooltip: {
    show: true,
    trigger: 'axis',
    formatter: ([item]: any) => {
      const [x, y] = item.data
      return `${new Time(new Date(x)).format('YYYY年MM月DD日')} ￥${getMoney(y)}`
    },
  },
  grid: [{ left: 16, top: 20, right: 16, bottom: 20 }],
  xAxis: {
    type: 'time',
    boundaryGap: ['3%', '0%'],
    axisLabel: {
      formatter: (value: string) => new Time(new Date(value)).format('MM-DD'),
    },
    axisTick: {
      alignWithLabel: true,
    },
  },
  yAxis: {
    show: true,
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
      },
    },
    axisLabel: {
      show: false,
    },
  },
}

export const LineChart = defineComponent({
  props: {
    data: {
      type: Array as PropType<[string, number][]>,
      required: true,
    },
  },
  setup: (props, context) => {
    const refDiv = ref<HTMLDivElement>()
    let chart: echarts.ECharts | undefined = undefined

    onMounted(() => {
      if (refDiv.value === undefined) {
        return
      }
      // 基于准备好的dom，初始化echarts实例
      chart = echarts.init(refDiv.value)
      // 绘制图表
      chart.setOption({
        ...echartsOption,
        series: [
          {
            data: props.data,
            type: 'line',
          },
        ],
      })
    })
    watch(
      () => props.data,
      () => {
        chart?.setOption({
          series: [
            {
              data: props.data,
            },
          ],
        })
      }
    )
    return () => <div ref={refDiv} class={s.wrapper}></div>
  },
})