vue项目引入echarts多层圆环图详细配置
一、效果图
== 注：请先引入 ecahrts，如果不会则直接跳到第三步 。我是全局引入的==
二、详细代码如下：
<template>
<div class="echart">
<!-- 这个 div 会被解析为 echarts图 -->
<div class="barChart" ref="barChart"></div>
</div>
</template>
<script>
export default {
mounted() {
this.initBarChart();
},
methods: {
initBarChart() {
let myChart = this.$echarts.init(this.$refs.barChart);
// total 和 salary的数据就是各个环的数据
let total = 100;
let salayry1 = 40;
let salayry2 = 10;
let salayry3 = 20;
let salayry4 = 30;
let salayry5 = 15;
let salayry6 = 20;
let option = {
color: [
"#00FFFF",
"#00B0FF",
"#FFC000",
"#FFAB6F",
"#63E315",
"#893BFF",
],
legend: {
orient: "vertical",
left: "10%",
top: "20%",
itemHeight: 12, //图例的高度
itemGap: 15, //图例之间的间距
data: [
{
name: "A版块",
icon: "circle",
textStyle: {
color: "#D2D3D8", // 单独设置某一个图列的颜色
},
},
{
name: "B版块",
icon: "circle",
textStyle: {
color: "#D2D3D8", // 单独设置某一个图列的颜色
},
},
{
name: "C版块",
icon: "circle",
textStyle: {
color: "#D2D3D8", // 单独设置某一个图列的颜色
},
},
{
name: "D版块",
icon: "circle",
textStyle: {
color: "#D2D3D8", // 单独设置某一个图列的颜色
},
},
{
name: "E版块",
icon: "circle",
textStyle: {
color: "#D2D3D8", // 单独设置某一个图列的颜色
},
},
{
name: "F版块",
icon: "circle",
textStyle: {
color: "#D2D3D8", // 单独设置某一个图列的颜色
},
},
],
//图例的名字需要和饼图的name一致，才会显示图例
},
series: [
// A版块
{
name: "A版块",
type: "pie",
radius: ["70%", "75%"],
center: ["65%", "50%"],
//环的位置
label: {
show: false,
position: "center",
},
labelLine: {
normal: {
show: false,
},
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold",
},
},
data: [
{
value: 80, //需要显示的数据
name: 80 + "%",
itemStyle: {
normal: {
color: "#00FFFF",
},
},
},
{
value: total - salayry1,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: "#081A3C",
},
},
},
],
},
// B版块
{
name: "B版块",
type: "pie",
radius: ["60%", "65%"],
center: ["65%", "50%"],
//环的位置
label: {
show: false,
position: "center",
},
labelLine: {
normal: {
show: false,
},
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "500",
},
},
data: [
{
value: salayry2, //需要显示的数据
name: salayry2 + "%",
itemStyle: {
normal: {
color: "#00B0FF",
},
},
},
{
value: total - salayry2,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: "#081A3C",
},
},
},
],
},
// C版块
{
name: "C版块",
type: "pie",
radius: ["50%", "55%"],
center: ["65%", "50%"],
//环的位置
label: {
show: false,
position: "center",
},
labelLine: {
normal: {
show: false,
},
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold",
},
itemStyle: {
normal: {
color: "#FFC000",
},
},
},
data: [
{
value: salayry3, //需要显示的数据
name: salayry3 + "%",
itemStyle: {
normal: {
color: "#FFC000",
},
},
},
{
value: total - salayry3,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: "#081A3C",
},
},
},
],
},
// D版块
{
name: "D版块",
type: "pie",
radius: ["40%", "45%"],
center: ["65%", "50%"],
//环的位置
label: {
show: false,
position: "center",
},
labelLine: {
normal: {
show: false,
},
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold",
},
},
data: [
{
value: salayry4, //需要显示的数据
name: salayry4 + "%",
itemStyle: {
normal: {
color: "#FFAB6F",
},
},
},
{
value: total - salayry4,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: "#081A3C",
},
},
},
],
},
// E版块
{
name: "E版块",
type: "pie",
radius: ["30%", "35%"],
center: ["65%", "50%"],
//环的位置
label: {
show: false,
position: "center",
},
labelLine: {
normal: {
show: false,
},
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold",
},
},
data: [
{
value: salayry5, //需要显示的数据
name: salayry5 + "%",
itemStyle: {
normal: {
color: "#63E315",
},
},
},
{
value: total - salayry5,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: "#081A3C",
},
},
},
],
},
// F版块
{
name: "F版块",
type: "pie",
radius: ["20%", "25%"],
center: ["65%", "50%"],
label: {
show: false,
position: "center",
// normal: {
// position: 'inner'
// }
},
labelLine: {
normal: {
show: false,
},
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold",
},
},
data: [
{
value: salayry6,
name: salayry6 + "%",
itemStyle: {
normal: {
color: "#893BFF",
},
},
},
{
value: total - salayry6,
itemStyle: {
normal: {
color: "#081A3C",
},
},
},
],
},
],
};
myChart.setOption(option);
},
},
};
</script>
// 这里不一定非要 less，其他的也是可以的
<style scoped lang="less">
.echart {
width: 600px;
height: 400px;
margin: auto;
border: 3px solid lightcoral;
background-color: #0f2858;
// 宽高是必须给的，可以给百分比、具体的像素等....
.barChart {
width: 600px;
height: 400px;
}
}
</style>
三、如何引入echarts？
点击查看 ——》 echarts 引入教程