Echarts创建流程

安装，项目引入：

npm install echarts --save

在项目中导入：

在man.js中引入：
import { createApp } from 'vue'
import App from './App.vue'
//1.引入 Echarts 文件
import * as echarts from 'echarts'

const app = createApp(App);
app.config.globalProperties.$echarts = echarts
app.mount('#app')

代码实例：

<template>
	//2.创建一个容器（必须有宽高）
  <div id="main" ref="menu_item"> </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts/core';
import {GridComponent} from 'echarts/components';
import {LineChart} from 'echarts/charts';
import { UniversalTransition} from 'echarts/features';
import { CanvasRenderer} from 'echarts/renderers';

echarts.use(
  [GridComponent, LineChart, CanvasRenderer, UniversalTransition]
);

//3.获取 DOM 元素（容器），初始化 Echarts 实例 
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
//4.指定图表的配置项和数据
option = {
	 title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
         data: ['销量']
      },      
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},       
      series: [
         {
           name: '销量',
           type: 'bar',
           data: [5, 20, 36, 10, 10, 20]
         }
        ]
 };
// 5.使用刚指定的配置项和数据显示图表
option && myChart.setOption(option);
</script>
<style>
#main{
  width: 90vw;
  height: 70vh;

}
</style>

总结：

​ Echarts 基本使用的五个步骤:

  1、引入 Echarts 文件

​ 2、创建一个容器（必须有宽高）

​ 3、获取 DOM 元素（容器），初始化 Echarts 实例

​ 4、指定图表的配置项和数据

​ 5、使用配置项和数据渲染图表（渲染到容器中）

​ 关键内容，属性直接属于option

​ title：标题组件，包含主标题和副标题

​ color：全局调色盘

​ grid：网格布局

​ xAxis：直角坐标系 grid 中的 x 轴

​ yAxis：直角坐标系 grid 中的 y 轴

​ dataset：数据集

​ visualMap： 把数据的哪个维度映射到什么视觉元素上