安装,项目引入:
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: 把数据的哪个维度映射到什么视觉元素上