柱形图
图片1.png
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<div :id="id" class="orderArea orderbarArea"></div>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<script>
import echarts from 'echarts'
import echartsTheme from "cps/echarts/theme/westeros.json";
export default {
name:'barChat',
data(){
return {
id:'barChart',
myChart:null,
}
},
mounted(){
this.loadChart();
},
beforeDestroy() {
if (!this.myChart) {
return
}
this.myChart.dispose();
this.myChart = null;
},
methods: {
loadChart(){
this.$nextTick(() => {
echarts.registerTheme('westeros', echartsTheme)
this.myChart = echarts.init(document.getElementById(this.id),'westeros');
this.myChart.setOption(this.initOption());
})
},
initOption(){
let option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['访问量','下载量']
},
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'访问量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:'下载量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
}
}
]
};
return option;
},
},
watch: {
}
}
</script>
饼状图
图片2.png
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<div :id="id" class="orderArea"></div>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<script>
import echarts from 'echarts'
import echartsTheme from "cps/echarts/theme/westeros.json";
export default {
data(){
return {
id:'ordertype',
myChart:null,
}
},
props: ['type'],
mounted(){
this.loadChart();
},
beforeDestroy() {
if (!this.myChart) {
return
}
this.myChart.dispose();
this.myChart = null;
},
methods: {
loadChart(){
this.$nextTick(() => {
echarts.registerTheme('westeros', echartsTheme)
this.myChart = echarts.init(document.getElementById(this.id),'westeros');
this.myChart.setOption(this.initOption(this.type));
})
},
initOption(type){
let text,legend_data,series_data;
if(type == "ordertype"){
text = "用户投资类型";
legend_data = ['基金','股票','债券','储蓄','期货'];
series_data = [
{value:335, name:'基金'},
{value:310, name:'股票'},
{value:234, name:'债券'},
{value:135, name:'储蓄'},
{value:1548, name:'期货'}
]
}else{
text = "用户投资区域";
legend_data = ['华东区','华南区','华中区','华北区','西南区','东北区','台港澳'];
series_data = [
{value:335, name:'华东区'},
{value:310, name:'华南区'},
{value:234, name:'华中区'},
{value:835, name:'华北区'},
{value:1548, name:'西南区'},
{value:335, name:'东北区'},
{value:454, name:'台港澳'}
]
}
let data = {
title : {
text: text,
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: legend_data
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '50%',
center: ['50%', '60%'],
data:series_data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
return data;
},
},
watch: {
type:(v)=>{
this.initOption(v)
}
}
}
</script>
雷达图和折线图实现步骤同上。
