First of all, congratulations to Echarts for successfully graduating from Apache, with a famous name: Apache ECharts, the current official website address is here: Portal , the homepage is quite international, and it looks much more comfortable than before, but the document is still the same document (T▽T )
ps: Graduating from Apache literally means changing from a domestic project to an international open source project. Simply put, it means changing from a very powerful project to a super powerful project
Article directory
Project effect
foreword
Recently, some data dialysis projects need to use report charts, so the old-fashioned ECharts and the relatively new AntV are useful for report charts. After thinking about it, I still use Echarts, because the product line of AntV is really good. There are all kinds of things, such as G2 , G6 , F2 , L7 , which made me dizzy, so I decided to use Echarts to save a lot of trouble.
1. Installation
目前安装自动指向的版本是5.4.0
npm install echarts --save
2. Test run
The official quick start document address: Portal , the document is really fast, only using code, and I don’t even bother to write a framework case. .
For the test, the full amount is directly imported, and it looks more concise. idThe usage is still the same as before. You can use or to get the dom ref, but I don’t like to see native things in the vue project, so I use ref. Remember to bring the value of ref .value; if you enter the page, you need to display the chart , you must put the initial code onMountedin the life cycle function, otherwise Error: Initialize failed: invalid dom.an error will be reported; in addition, the height must be set to a real height, otherwise the page will be blank.
setup test code: copy it to a vue file casually, if the chart can be displayed, it means that echarts can run normally
<template>
<div class="test">
<h1>setup测试代码</h1>
<div ref="echartRef" class="echart"></div>
</div>
</template>
<script setup>
import {
ref, onMounted } from 'vue'
import * as echarts from 'echarts';
const echartRef = ref()
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(echartRef.value);
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
})
</script>
<style lang="scss" scoped>
.test {
margin: auto;
max-width: 60vw;
.echart {
width: 100%;
height: 500px;
}
}
</style>
3. Global configuration
In order to prevent the used pages from repeatedly importing echarts, we have to set it as a global module, and vue3 now provides two forms of globalization: and, next globalPropertieswe provide/injectwill see how to use two forms to achieve globalization.
hint
If you import it on demand, you need to'echarts/core'import the chart you want to use in the package. The name isXxx+Chart, for example, a line chart.LineChartIf you don’t know what the name of the chart is , you can check it in the title of the official example.echarts.useone time.
1. globalProperties form:
Introduce echarts first main.js, and mount it app.config.globalProperties. The name style is best to use $the beginning. If routing is used, it will be automatically mounted on $routerit $route.
① Full introduction:
main.js
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
import * as echarts from 'echarts';
const app = createApp(App)
app.use(router)
app.mount('#app')
app.config.globalProperties.$echarts = echarts
② Import on demand:
main.js
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import {
LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LineChart
]);
const app = createApp(App)
app.use(router)
app.mount('#app')
app.config.globalProperties.$echarts = echarts
Test code:
If you use it, first introduce the module in vue getCurrentInstance, and then you can appContext.config.globalPropertiesfind what we mounted in it $echarts.
xxx.vue
<template>
<div class="global-properties">
<h1>globalProperties</h1>
<div ref="LineChartRef" class="echart"></div>
</div>
</template>
<script setup>
import {
ref, onMounted, getCurrentInstance } from 'vue'
const LineChartRef = ref()
onMounted(() => {
// 获取全局echarts实例
const echarts = getCurrentInstance().appContext.config.globalProperties.$echarts
// 基于准备好的dom，初始化echarts实例
const lineChar = echarts.init(LineChartRef.value);
// 绘制图表
lineChar.setOption({
title: {
text: '折线图'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
});
})
</script>
<style lang="scss" scoped>
.global-properties {
margin: auto;
max-width: 60vw;
.echart {
width: 100%;
height: 500px;
}
}
</style>
2. Provide / inject form:
Since provideand injectmust setupbe used in , we have to provide in the appecharts
① Full introduction:
app.view:
<script setup>
import * as echarts from 'echarts';
import {
provide } from 'vue'
provide('echarts', echarts)
</script>
② Import on demand:
app.view:
<script setup>
import {
provide } from 'vue'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
BarChart, LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import {
LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
BarChart,
LineChart
]);
provide('echarts', echarts)
</script>
Test code:
Then you can inject echarts into the subpage to use
xxx.vue:
<template>
<div class="provide-inject">
<h1>provide / inject</h1>
<div ref="BarChartRef" class="echart"></div>
</div>
</template>
<script setup>
import {
ref, onMounted, inject } from 'vue'
const BarChartRef = ref()
onMounted(() => {
// 注入echarts实例
const echarts = inject("echarts");
// 基于准备好的dom，初始化echarts实例
const BarChart = echarts.init(BarChartRef.value);
// 绘制图表
BarChart.setOption({
title: {
text: '柱状图'
},
tooltip: {
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
})
</script>
<style lang="scss" scoped>
.provide-inject {
margin: auto;
max-width: 60vw;
.echart {
width: 100%;
height: 500px;
}
}
</style>
❀Simple package
The above on-demand import needs to import too many things, which makes main.js/app.vuethe file look extremely dirty, so we can encapsulate it and import it when it needs to be used.
Local working directory:
Vue3脚手架项目
|-src
|-utils
|-echarts.js
echarts.js: I put the file in the utils folder I built. If you change the location, remember to change the import path yourself.
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
BarChart, LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import {
LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
BarChart,
LineChart
]);
export {
echarts
}
If you choose the form of globalProperties, just main.jsintroduce it like this: (the usage remains unchanged)
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {
echarts } from '@/utils/echarts' // 按需引入echarts
const app = createApp(App)
app.use(router)
app.mount('#app')
app.config.globalProperties.$echarts = echarts // 挂载全局使用
And if you choose the provide / inject form, just app.vueintroduce it like this: (the usage method remains the same)
<script setup>
import {
provide } from 'vue'
import {
echarts } from '@/utils/echarts' // 按需引入echarts
provide('echarts', echarts) // 提供全局使用
</script>
4. Loop output
Sometimes the number of charts we want to output may be uncertain. At this time, we need to dynamically bind the ref to obtain the dom. If you don’t know, you can see the example in the official document: Portal, and then assume that after getting the back-end data and the page After the update is completed, we can generate charts in a loop, see the following case for details.
Code demo:
<template>
<div class="loop-output">
<h1>循环输出</h1>
<div class="box">
<div v-for="item in echartsData.value" :key="item.id" ref="refList" class="echart"></div>
</div>
</div>
</template>
<script setup>
import {
ref, reactive, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';
onMounted(() => {
loadData()
})
const refList = ref([])
const echartsData = reactive({
value: [] })
// 模拟加载后端数据
const loadData = () => {
echartsData.value = [
{
id: '1',
value: 30,
name: '藤原拓海'
},
{
id: '2',
value: 60,
name: '高桥凉介'
},
{
id: '3',
value: 90,
name: '奔驰上树'
}
]
// 需要等页面再次更新完，不然拿不到dom
nextTick(() => {
echartsData.value.forEach((e, i) => {
initEcharts(e, refList.value[i])
})
})
}
const initEcharts = (data, echartRef) => {
// 基于准备好的dom，初始化echarts实例
const chart = echarts.init(echartRef);
let option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: 'Pressure',
type: 'gauge',
detail: {
formatter: '{value}'
},
data: [data]
}
]
};
// 绘制图表
chart.setOption(option);
}
</script>
<style lang="scss" scoped>
.loop-output {
margin: auto;
max-width: 60vw;
overflow: hidden;
.box {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.echart {
width: 50%;
height: 280px;
}
}
</style>
5. Dynamic update
In the project I am doing, not only the chart is displayed when the page is first loaded, but also the chart is dynamically updated according to the results of the filter conditions. The chart of echarts is drawn with , so if you want to update the canvassecond time, you need to onMountedinitialize the chart first, and then use getOption()Get the instance of the chart option, replace and update the corresponding chart data in the option, and then use setOption(option)it to trigger the update twice, otherwise it will not take effect; of course, it v-ifis initalso necessary to force the dom to destroy and rebuild the chart, and then initialize the chart every time It can be updated twice, but then the chart will flicker.
Code demo:
<template>
<div class="update">
<h1>动态更新</h1>
<div ref="echartRef" class="echart"></div>
<h3>集齐七天不洗头你的愿望是什么？</h3>
<button @click="updateEchart(0)" class="blue">脱单</button>
<button @click="updateEchart(1)" class="green">双休</button>
<button @click="updateEchart(2)" class="orange">暴富</button>
</div>
</template>
<script setup>
import {
ref, onMounted } from 'vue'
import * as echarts from 'echarts'
onMounted(() => {
// 初始化报表
pieChart = echarts.init(echartRef.value)
option_pie.series[0].data = requestData
pieChart.setOption(option_pie)
})
const echartRef = ref()
let pieChart
const option_pie = {
title: {
text: '饼图',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '',
type: 'pie',
radius: '50%',
data: [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
// 模拟服务器获取的数据
let requestData = [
{
value: 1, name: '脱单' },
{
value: 1, name: '双休' },
{
value: 1, name: '暴富' },
]
// 点击更新报表
const updateEchart = (id) => {
// 模拟数据更新
if (id != undefined) requestData[id].value += 1
// 获取报表option实例
let option = pieChart.getOption()
// 给实例赋上新的值
option.series[0].data = requestData
// 二次更新图表
pieChart.setOption(option)
}
</script>
<style lang="scss" scoped>
.update {
margin: auto;
max-width: 60vw;
.echart {
width: 100%;
height: 450px;
}
button {
margin: 0 10px;
color: white;
cursor: cell;
}
.blue {
background: #5470C6;
}
.green {
background: #95D178;
}
.orange {
background: #FAC858;
}
}
</style>
Get project demo
If you have points, please pay the public food. If you don’t have points, just download it from Gitee
❀CSDN:
vue3-echarts (js original flavor): portal
vue3-echarts-ts (ts flavor): portal
❀Gitee:
vue3-echarts (js original flavor): portal
vue3-echarts-ts (ts flavor): portal