vue3 echarts5
vue3 vite 建立项目
C:\>npm init vite@latest ve1 -- --template vue
Scaffolding project in C:\ve1...
Done. Now run:
cd ve1
npm install
npm run dev
C:\>cd ve1
C:\ve1>npm install
added 32 packages in 4s
C:\ve1>npm i echarts --save
added 3 packages in 4s
C:\ve1>npm info vue version
3.2.31
C:\ve1>npm ls
ve1@0.0.0 C:\ve1
+-- @vitejs/plugin-vue@2.2.4
+-- echarts@5.3.0
+-- vite@2.8.6
`-- vue@3.2.31
自动动项目
package.json
vite --open
{
"name": "ve1",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite --open",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"echarts": "^5.3.0",
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.2.0",
"vite": "^2.8.0"
}
}
c:\ve1>npm run dev
vite v2.8.6 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 385ms.
柱形图
<template>
<div ref="cc" style="width:100%;height: 400px;margin:0 auto"></div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import * as charts from 'echarts'
let cc = ref()
onMounted(()=>{
let cs = charts.init(cc.value)
let opt = {
title:{
text: 'Echarts 入门示例'
},
tooltip:{},
legend:{
data:['数量']
},
xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子','手套','帽子']},
yAxis:{},
series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20,50,80]}]
}
cs.setOption(opt)
})
</script>
<style scoped>
</style>
<template>
<div ref="echart" class="echartDiv"></div>
<h3 ref="hh"></h3>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from 'vue';
let echart = ref();
let hh = ref();
onMounted(()=>{
hh.value.innerHTML='hello'
let myChart = echarts.init(echart.value);
// 指定图表的配置项和数据
// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
tooltip: {},
legend: {
data: ['会员登录次数']
},
xAxis: {
data: ['浩星', '妍仔', '哆啦a梦', '李强', '王颖', '老王']
},
yAxis: {},
series: [{
name: '会员登录次数',
type: 'bar',
data: [4, 22, 1, 11, 23, 11]
}]
});
})
</script>
<style scoped>
.echartDiv {
width: 100%;
height: 400px;
}
</style>
折线图
<template>
<div id="e1" :style="{width: '100%', height: '550px'}"></div>
</template>
<script setup>
import {onMounted} from "vue";
import * as echarts from 'echarts'
onMounted(() => {
//需要获取到element,所以是onMounted的Hook
let myChart = echarts.init(document.getElementById("e1"));
// 绘制图表
myChart.setOption({
title: { text: "总用户量" },
tooltip: {},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
},
yAxis: {},
series: [
{
name: "用户量",
type: "line",
data: [5, 20, 36, 10, 10, 20],
},
],
})
})
</script>
<style>
</style>