创建好vue3项目后安装echarts
终端输入：
npm i echarts --save
安装好后：
1.直接在组件中引用echarts
<script setup>
import * as echarts from echarts
</script>
2.全局引入 ，一般在app.vue
app.vue (provide 和 inject的使用)
<script setup>
import * as echarts from echarts
provide(echarts,echarts)
</script>
在需要用echarts的组件中用inject获取
<script setup>
const echarts = inject(echarts)
</script>
注意！！！vue挂载 、echarts渲染 、数据获取三者的时间顺序
1.先讲vue挂载和echarts渲染
拿挂网的入门例子来说 。（vue3 版本）
<script setup>
import * as echarts from echarts;
const myCharts = ref(null)
// 基于准备好的dom ，初始化echarts实例
var myChart = echarts.init(mycharts.value);
// 绘制图表
myChart.setOption({
title: {
text: ECharts 入门示例
},
tooltip: {},
xAxis: {
data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]
},
yAxis: {},
series: [
{
name: 销量,
type: bar,
data: [5, 20, 36, 10, 10, 20]
}
]
});
<script>
开始我是这么写的 ，开起来好像没有问题 。但是你一打开页面就会发现数据没有渲染上去 。因为此时vue还没有挂载到dom元素上去 ，所以获取不到dom元素 ，数据当然不能渲染 。
需要这么写 ，把获取dom元素和初始化myecharts的动作放到onMounted(()=>{})中
<script setup>
import * as echarts from echarts;
onMounted(()=>{
const myCharts = ref(null)
// 基于准备好的dom ，初始化echarts实例
var myChart = echarts.init(mycharts.value);
// 绘制图表
myChart.setOption({
title: {
text: ECharts 入门示例
},
tooltip: {},
xAxis: {
data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]
},
yAxis: {},
series: [
{
name: 销量,
type: bar,
data: [5, 20, 36, 10, 10, 20]
}
]
});
})
<script>
vue3：你可以通过在生命周期钩子前面加上 “on ” 来访问组件的生命周期钩子 。
我在<script setup>上加了setup ，就等于在setup内部.
下表包含如何在 setup () 内部调用生命周期钩子：
选项式 API
Hook inside setup
beforeCreate
Not needed*
created
Not needed*
beforeMount
onBeforeMount
mounted
onMounted
beforeUpdate
onBeforeUpdate
updated
onUpdated
beforeUnmount
onBeforeUnmount
unmounted
onUnmounted
errorCaptured
onErrorCaptured
renderTracked
onRenderTracked
renderTriggered
onRenderTriggered
activated
onActivated
deactivated
onDeactivated
TIP：
因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的 ，所以不需要显式地定义它们 。换句话说 ，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写 。
这些函数接受一个回调函数 ，当钩子被组件调用时将会被执行:
// MyBook.vue
export default {
setup() {
// mounted
onMounted(() => {
console.log(Component is mounted!)
})
}
}
2.echarts渲染和数据获取
通过axios获取数据然后通过echarts渲染到页面
如果是用的异步请求就要非常注意了！
简单介绍一下异步请求：异步请求在执行过程中是不会影响后面程序执行的 ，好比如在主线程开辟了一个子线程 。
如过异步获取数据 ，还在获取中 ，echart已经把dom元素渲染了 ，但是i请求的数据还没返回回来 ，此时渲染的就是空数据 。
所以用异步请求 ，可以把echart渲染和初始化放到axios.then()里面 ，这样就不会出现渲染空数据了 。
如下面：
<script setup>
import api from @/api/index
var keydata = []
var valuedata = []
const resdata = []
const wordsChartsBox = ref(null)
const echarts = inject(echarts)
function getf() {
api.get(/backstage).then(res => {
for (const key in res.data) {
var element = res.data[key]
if (key == 1) {
keydata = element
} else {
valuedata = element
}
}
for (let index = 0; index < keydata.length; index++) {
resdata.push(
{
value: parseInt(valuedata[index]),
name: keydata[index]
}
)
}
const wordsChartsOption = {
title: {
text: 常用词统计,
subtext: 通过常用词统计分析盲人需求,
left: center
},
tooltip: {
trigger: item,
formatter: {a} <br/>{b} : {c} ({d}%)
},
legend: {
type: scroll,
orient: vertical,
right: 10,
top: 20,
bottom: 20,
data: keydata
},
series: [
{
name: 姓名,
type: pie,
radius: 55%,
center: [40%, 50%],
data: resdata,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: rgba(0, 0, 0, 0.5)
}
}
}
]
}
const wordsCharts = echarts.init(wordsChartsBox.value)
wordsCharts.setOption(wordsChartsOption)
})
console.log(resdata)
}
onMounted(() => {
getf()
})
</script>
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
