一、vue-echarts
echarts官方专门为vue做的封装。
github vue-echarts
在vue3中使用：
vue3中使用vue-echarts
1、安装
$ npm install echarts vue-echarts
2、使用
main.js
import { createApp } from 'vue'
import ECharts from 'vue-echarts'
import { use } from "echarts/core";
// 手动引入 ECharts 各模块来减小打包体积
import {
CanvasRenderer
} from 'echarts/renderers'
import {
BarChart
} from 'echarts/charts'
import {
GridComponent,
TooltipComponent
} from 'echarts/components'
use([
CanvasRenderer,
BarChart,
GridComponent,
TooltipComponent
]);
const app = createApp(...)
// 全局注册组件（也可以使用局部注册）
app.component('v-chart', ECharts)
app.mount(...)
demo.vue
<template>
<div class="home">
<v-chart
class="vuechart"
:option="data"
width="100"
height="100"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
const data = ref({
title: {
text: "Traffic Sources",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
},
series: [
{
name: "Traffic Sources",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{ value: 335, name: "Direct" },
{ value: 310, name: "Email" },
{ value: 234, name: "Ad Networks" },
{ value: 135, name: "Video Ads" },
{ value: 1548, name: "Search Engines" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
})
</script>
<style>
.vuechart{
height:400px;
}
</style>
在组件中使用。
在组件中简单使用。
简单使用
<template>
<div class="home">
<v-chart
class="vuechart"
:option="data"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
const data = ref({
title: {
text: "Traffic222 Sources",
left: "center"
},
xAxis:{
type:'category'
},
yAxis:{
type:'value'
},
series:[{
type:'line',
data:[100,200,20,500,600]
}]
})
</script>
<style>
.vuechart{
height:400px;
}
</style>
3、举例
vue-charts绘制散点图雷达图
<template>
<div class="bmap_container">
<v-chart :option="options" />
</div>
</template>
<script setup>
import { onMounted,reactive } from 'vue'
import 'echarts/extension/bmap/bmap'
import mystyleJson from '../assets/mystyle.js'
let options = reactive({})
onMounted(()=>{
options.title = {
text:'外卖销售数据大盘',
subtext:'销售趋势统计',
sublink:'http://www.baidu.com',
left:'center'
}
options.bmap={
key:'iz9QPjUAe3tXx7CNgnY1t0afdAlwcHRQ',
center:[104.114129,37.550339],
zoom:5,
roam:false,
mapStyle:{
styleJson:mystyleJson
}
}
let testPoint = [{
name:'海门',
value:[121.15,31.89,80]
},{
name:'南京',
value:[118.78,32.04,100]
}]
let testPoint2 = [{
name:'北京',
value:[116.404188,39.917565,250]
},{
name:'上海',
value:[121.487439,31.237411,130]
}]
options.tooltip = {}
options.series=[{
name:'销售额',
type:'scatter',
coordinateSystem:'bmap',
data:testPoint,
encode:{
value:2
},
itemStyle:{
color:'purple'
},
symbolSize:function(val){
return val[2]/10
},
label:{
show:false,//值为false时需将emphasis设置为true，鼠标划上会显示
position:'right',
formatter:function(v){
return `${v.data.name} - ${v.data.value[2]}`
}
},
emphasis:{
label:{
show:true
}
}
},{
name:'top2',
type:'effectScatter',
coordinateSystem:'bmap',
data:testPoint2,
encode:{
value:2
},
itemStyle:{
color:'purple'
},
symbolSize:function(val){
return val[2]/10
},
label:{
show:true,
position:'right',
formatter:function(v){
return `${v.data.name} - ${v.data.value[2]}`
}
},
hoverAnimation:true,
rippleEffect:{//添加该属性后，水韵纹会变成线圈
brushType:'stroke'
},
itemStyle:{
color:'red',
shadowBlur:20,
shadowColor:'#333'
}
}]
})
</script>
<style scoped>
.bmap_container{
width:100%;
height:100%;
}
</style>
二、v-charts
element-ui官方为echarts做的封装。
在使用echarts生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts的出现正是为了解决这个痛点。基于Vue2.0和echarts封装的v-charts图标组件，只需要统一提供一种对前后端都有好的数据格式设置简单的配置项，便可轻松生成常见的图表。
但目前仍不支持vue3
