# Echarts 饼图
# 基础饼图
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
# 环状图
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
# 南丁格尔玫瑰图
option = {
title: {
text: 'Nightingale Chart',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: [
'rose1',
'rose2',
'rose3',
'rose4',
'rose5',
'rose6',
'rose7',
'rose8'
]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Radius Mode',
type: 'pie',
radius: [20, 140],
center: ['25%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 33, name: 'rose 2' },
{ value: 28, name: 'rose 3' },
{ value: 22, name: 'rose 4' },
{ value: 20, name: 'rose 5' },
{ value: 15, name: 'rose 6' },
{ value: 12, name: 'rose 7' },
{ value: 10, name: 'rose 8' }
]
},
{
name: 'Area Mode',
type: 'pie',
radius: [20, 140],
center: ['75%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 5
},
data: [
{ value: 30, name: 'rose 1' },
{ value: 28, name: 'rose 2' },
{ value: 26, name: 'rose 3' },
{ value: 24, name: 'rose 4' },
{ value: 22, name: 'rose 5' },
{ value: 20, name: 'rose 6' },
{ value: 18, name: 'rose 7' },
{ value: 16, name: 'rose 8' }
]
}
]
};
# 双饼图动画
<template>
<Chart :option="option" @click.native="onClick" v-loading="isLoading" />
</template>
<script>
import Chart from './chart.vue';
const sleep = time => new Promise(r => setTimeout(r, time));
const list1 = Array.from({ length: 5 })
.map((item, index) => {
return {
name: `数据${index}`,
value: Math.random() * 1000
};
})
.sort((a, b) => b.value - a.value);
const list2 = list1.map(item => {
return {
name: item.name,
value: Math.random() * 1000
};
});
const option1 = {
animation: true,
tooltip: {
show: true
},
title: [
{
text: '指标1',
left: '50%',
top: 'middle',
textAlign: 'center'
}
],
series: [
{
type: 'pie',
center: ['50%', '50%'],
radius: ['40%', '60%'],
label: {
show: true
},
data: list1
}
]
};
const option2 = {
animation: true,
tooltip: {
show: true
},
title: [
{
text: '指标1',
left: '25%',
top: 'middle',
textAlign: 'center'
},
{
text: '指标2',
left: '75%',
top: 'middle',
textAlign: 'center'
}
],
series: [
{
type: 'pie',
center: ['25%', '50%'],
radius: ['40%', '60%'],
label: {
show: true
},
data: list1
},
{
type: 'pie',
center: ['75%', '50%'],
radius: ['40%', '60%'],
label: {
show: true
},
data: list2
}
]
};
export default {
components: {
Chart
},
data() {
return {
option: option1,
toggle: 0,
isLoading: false
};
},
methods: {
async onClick() {
this.toggle = [this.toggle + 1] % 2;
this.isLoading = true;
await sleep(600);
this.isLoading = false;
this.option = this.toggle === 0 ? option1 : option2;
}
}
};
</script>
<template>
<div id="echarts-container"></div>
</template>
<script>
// import * as echarts from "echarts";
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart, PieChart, FunnelChart, SankeyChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
ToolboxComponent,
LegendComponent,
GridComponent,
GraphicComponent
} from 'echarts/components';
// 注册必须的组件
echarts.use([CanvasRenderer]);
echarts.use([TitleComponent, TooltipComponent, ToolboxComponent, LegendComponent, GridComponent, GraphicComponent]);
echarts.use([LineChart, BarChart, PieChart, FunnelChart, SankeyChart]);
const sleep = time => new Promise(r => setTimeout(r, time));
const option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
export default {
props: {
option: {
default: () => option
}
},
watch: {
option() {
this.render();
}
},
created() {
this.title = []
this.echartsInstance = null;
},
mounted() {
this.echartsInstance = echarts.init(document.getElementById('echarts-container'));
window.addEventListener('resize', () => {
this.echartsInstance.resize();
});
this.echartsInstance.on('finished', () => {
this.option.title = this.title;
this.echartsInstance.setOption(this.option, false);
});
this.render();
},
methods: {
async render() {
this.title = this.option.title;
this.option.title = [];
this.echartsInstance.setOption(this.option, true);
}
}
};
</script>