echarts怎么使用？数据可视化怎么做？本文是vue3框架搭配echarts搭建数据可视化图表！将给大家演示echarts的安装，和基本使用！图形会以柱状图和漏斗图为大家做个展示！
企业开发建议按需引入，因为按需引入的体积比较小，利于优化代码；
安装echarts库：
说明
企业开发建议按需引入，因为按需引入的体积比较小，利于优化代码；
以下演示，将直接全局引入了
echarts官网链接：
https://echarts.apache.org/zh/index.html
安装命令
npm install echarts --save yarn add echarts --save pnpm i echarts --save
全局引入
正常情况如果全局引入，应该在main.js里引入，按需引入则在需要的组件里引入，我这里为了演示方便，全局引入也在组件内引入了！
import * as echarts from "echarts"
echarts图表小demo：
演示图：
代码：
<template>
<div class="chart-container">
<div ref="chartRef" class="chart"></div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import * as echarts from "echarts"
const chartRef = ref(null) // 创建一个ref引用来保存echarts容器
onMounted(() => {
const chartDom = chartRef.value
console.log(chartDom)
const myChart = echarts.init(chartDom) // 使用echarts初始化图表
// 在此处设置echarts的配置项和数据
const options = {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
}
myChart.setOption(options) // 将配置项应用到图表中
})
</script>
<style>
.chart-container {
width: 100%;
height: 400px;
}
.chart {
width: 100%;
height: 100%;
}
</style>说明
以上这个官方入门示例代码主要有以下注意点：
1、引入echarts文件
2、需要用一个ref获取页面节点
<div ref="chartRef" class="chart"></div>
const chartRef = ref(null) // 创建一个ref引用来保存echarts容器
名字需要对应，才能获取到节点，否则返回null
3、在onMounted生命周期里写图表逻辑，实现组件一加载即可看到图表
4、使用echarts初始化图表
const myChart = echarts.init(chartDom) // 使用echarts初始化图表
5、在options对象里写图形的逻辑
6、应用图表到容器中
myChart.setOption(options) // 将配置项应用到图表中
echarts梯形图：
<template>
<div class="echarts-box">
<div id="myEcharts" :style="{ width: '420px', height: '360px' }"></div>
</div>
</template>
<script setup>
import * as echarts from "echarts"
import { onMounted, onUnmounted } from "vue"
import { FunnelChart } from "echarts/charts"
import { CanvasRenderer } from "echarts/renderers"
echarts.use([FunnelChart, CanvasRenderer])
let myEcharts = echarts
onMounted(() => {
initChart()
})
onUnmounted(() => {
myEcharts.dispose
})
function initChart() {
let chart = myEcharts.init(
document.getElementById("myEcharts"),
"purple-passion"
)
chart.setOption({
series: [
{
type: "funnel",
left: "10%",
width: "50%",
min: 40,
max: 100,
minSize: "50%",
maxSize: "100%",
data: [
{ value: 60, name: "Visit" },
{ value: 40, name: "Inquiry" },
{ value: 80, name: "Click" },
{ value: 100, name: "Show" },
],
},
],
})
window.onresize = function () {
chart.resize()
}
}
</script>硬核补充：
如果此图表有动态展示效果，例如点击某个按钮或者搜索或者筛选，视图可视化图表会更新。
这种业务需求的思路如下：
1、option里的数据可以做成响应式数据
2、将执行代码挂载option的封装到一个函数里，用调用函数的方式来调用
3、用侦听器watch监听数据的变化，当数据发生改变时，重新调用图表的挂载
