echarts可视化图像基础使用

echarts官网：

快速上手 - 使用手册 - Apache ECharts

1.下载安装echarts

npm i echarts

2.引入echarts

import * as echarts from 'echarts'

注意：不需要全局引入，只需在所操作页面进行局部引入

3.准备一个容器div，准备放置图表

4.在methods定义一个方法，配置图表信息

one() {
      // 创建一个初始化实例
      const myecharts = echarts.init(document.getElementById("one"), "dark");
      const option = {
        //x轴
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        // y轴
        yAxis: {
          type: "value",
        },
        //数据
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      // 配置数据
      myecharts.setOption(option);
    },

实现效果：

这样就完成一个基本的echarts图表了。。。