应对全场景AI框架部署挑战,MindSpore“四招”让你躺平!>>>
原生的Echarts需要定义id,有时候不方便,对于习惯了数据驱动可以使用vue-echarts
npm installl vue-echarts --save
这样会安装6.0以上的版本,6.0的版本是基于vue 3.0,如果我们现在正使用的vue 2.0,安装vue-echarts 要带上版本号
npm install vue-echarts@4.0.2 --save 同时也要安装echarts npm install echarts --save
使用vue-echarts的方法
在main.js中
import VueECharts from 'vue-echarts' Vue . component ( 'v-chart' , VueECharts )
在组件中使用的方法
vueEcharts.vue
<template>
<div style="height:500px">
<v-chart :options="polar"/>
</div>
</template>
<script>
export default {
name: "barChart",
data() {
return {
polar: {
title : {
text: '会员数据统计',
subtext: '动态数据',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
show: true,
orient: 'vertical',
left: 'left',
data: ['微信访问','公众号访问','扫码进入','分享进入','搜索访问']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'微信访问'},
{value:310, name:'公众号访问'},
{value:234, name:'扫码进入'},
{value:135, name:'分享进入'},
{value:1548, name:'搜索访问'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
};
},
mounted() {
},
methods: {}
};
</script>
<style>
.echarts {
width: 100%;
height: 100%;
}
</style>
只在组件中引入,并注册(不要在main.js中引入)
<template>
<div style="height:500px">
<v-chart :options="polar"/>
</div>
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'
export default {
name: "barChart",
components: {
'v-chart': ECharts
},
data() {
return {
polar: {
title : {
text: '会员数据统计',
subtext: '动态数据',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
show: true,
orient: 'vertical',
left: 'left',
data: ['微信访问','公众号访问','扫码进入','分享进入','搜索访问']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'微信访问'},
{value:310, name:'公众号访问'},
{value:234, name:'扫码进入'},
{value:135, name:'分享进入'},
{value:1548, name:'搜索访问'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
};
},
mounted() {
},
methods: {}
};
</script>
<style>
.echarts {
width: 100%;
height: 100%;
}
</style>