echarts饼图，柱状图的各种属性及效果
环图有阴影
<template>
<div class="home">
<div id="my_echarts"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {};
},
mounted() {
this.init_echarts();
},
methods: {
init_echarts() {
var pa = echarts.init(document.getElementById("my_echarts"));
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
}, //设置鼠标浮上去后显示提示框的文字格式
legend: {
orient: "horizontal", //设置标签所在的位置有horizontal(横向的)，vertical(竖向的)
left: "center", //设置标签距离边界的距离，同时还有top、bottom、left、right
icon: "roundRect", //设置标签的形状，还有'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
top: "10%",
textStyle: {
color: "#333"
}, //设置标签的字体颜色、大小
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
}, //设置图中每种颜色代表的内容
grid: {
left: "2%",
right: "2%",
top: "2%",
bottom: "2%"
}, //设置画布的上下左右留白
title: {
text: "Echarts",
subtext: "",
x: "center",
y: "top",
textAlign: "left",
textStyle: {
fontSize: "20",
color: "#333",
fontWeight: "600"
}
}, //设置标题的内容以及相关的位置与样式
series: [
{
name: "访问来源", //设置鼠标浮上去后显示提示框的标题
type: "pie", //设置图形是饼图还是柱状图，bar(柱状图)、pie(饼图)、line（折线图）
radius: ["30%", "50%"], //设置图形是饼图内圆和外圆的半径
avoidLabelOverlap: false,
hoverOffset: 15, //设置选中高出的部分 数值越大越高
labelLine: {
normal: {
show: true,
length: 30 //设置饼图的引导线的长度
}
},
label: {
show: false,
// position: "center", //在不设置引导线的情况下，中间显示选中的内容
normal: {
// show: true,
// formatter: "{b} {c} 人"
formatter: "{b}({d}%)", //设置引导线内容显示的格式
textStyle: {
color: "#333",
fontWeight: "550",
fontSize: "20px"
}
}
},
color: ["#C23531", "#2F4554", "#61A0A8", "#E98F6F", "#91C7AE"], //设置图形的颜色
emphasis: {
label: {
show: true,
fontSize: "20px",
fontWeight: "bold"
}
}, //设置选中状态下引导线的字体样式
data: [
{
value: 335,
name: "直接访问",
itemStyle: {
color: "#C23531",
shadowColor: "#C23531",
shadowBlur: 20
} //设置相对的颜色阴影
},
{
value: 310,
name: "邮件营销",
itemStyle: {
color: "#2F4554",
shadowColor: "#2F4554",
shadowBlur: 20
}
},
{
value: 234,
name: "联盟广告",
itemStyle: {
color: "#61A0A8",
shadowColor: "#61A0A8",
shadowBlur: 20
}
},
{
value: 135,
name: "视频广告",
itemStyle: {
color: "#E98F6F",
shadowColor: "#E98F6F",
shadowBlur: 20
}
},
{
value: 1548,
name: "搜索引擎",
itemStyle: {
color: "#91C7AE",
shadowColor: "#91C7AE",
shadowBlur: 20
}
}
]
}
]
};
pa.setOption(option);
}
}
};
</script>
<style lang="less" scoped>
.home {
width: 600px;
height: 600px;
margin: 20px auto;
#my_echarts {
width: 100%;
height: 100%;
}
}
</style>
分裂的环图
<template>
<div class="home">
<div id="my_echarts"></div>
</div>
</template>
<script>
// import pdf from "vue-pdf";
import echarts from "echarts";
export default {
data() {
return {};
},
mounted() {
this.init_echarts();
},
methods: {
init_echarts() {
var pa = echarts.init(document.getElementById("my_echarts"));
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
}, //设置鼠标浮上去后显示提示框的文字格式
legend: {
orient: "horizontal", //设置标签所在的位置有horizontal(横向的)，vertical(竖向的)
left: "center", //设置标签距离边界的距离，同时还有top、bottom、left、right
icon: "roundRect", //设置标签的形状，还有'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
top: "10%",
textStyle: {
color: "#333"
}, //设置标签的字体颜色、大小
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
}, //设置图中每种颜色代表的内容
grid: {
left: "2%",
right: "2%",
top: "2%",
bottom: "2%"
}, //设置画布的上下左右留白
title: {
text: "Echarts",
subtext: "",
x: "center",
y: "top",
textAlign: "left",
textStyle: {
fontSize: "20",
color: "#333",
fontWeight: "600"
}
}, //设置标题的内容以及相关的位置与样式
series: [
{
name: "访问来源", //设置鼠标浮上去后显示提示框的标题
type: "pie", //设置图形是饼图还是柱状图，bar(柱状图)、pie(饼图)、line（折线图）
radius: ["30%", "50%"], //设置图形是饼图内圆和外圆的半径
avoidLabelOverlap: false,
hoverOffset: 15, //设置选中高出的部分 数值越大越高
labelLine: {
normal: {
show: true,
length: 30 //设置饼图的引导线的长度
}
},
itemStyle: {
normal: {
borderWidth: 5,
borderColor: "#fff"
}
}, //设置每个还的边框，可以呈现出分裂的环图
label: {
show: false,
// position: "center", //在不设置引导线的情况下，中间显示选中的内容
normal: {
// show: true,
// formatter: "{b} {c} 人"
formatter: "{b}({d}%)", //设置引导线内容显示的格式
textStyle: {
color: "#333",
fontWeight: "550",
fontSize: "20px"
}
}
},
color: ["#C23531", "#2F4554", "#61A0A8", "#E98F6F", "#91C7AE"], //设置图形的颜色
emphasis: {
label: {
show: true,
fontSize: "20px",
fontWeight: "bold"
}
}, //设置选中状态下引导线的字体样式
data: [
{
value: 335,
name: "直接访问"
},
{
value: 310,
name: "邮件营销"
},
{
value: 234,
name: "联盟广告"
},
{
value: 135,
name: "视频广告"
},
{
value: 1548,
name: "搜索引擎"
}
]
}
]
};
pa.setOption(option);
}
}
};
</script>
<style lang="less" scoped>
.home {
width: 600px;
height: 600px;
margin: 20px auto;
#my_echarts {
width: 100%;
height: 100%;
}
}
</style>
柱状图
<template>
<div class="home">
<div id="my_echarts"></div>
</div>
</template>
<script>
// import pdf from "vue-pdf";
import echarts from "echarts";
export default {
data() {
return {};
},
mounted() {
this.init_echarts();
},
methods: {
init_echarts() {
var pa = echarts.init(document.getElementById("my_echarts"));
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} "
}, //设置鼠标浮上去后显示提示框的文字格式
legend: {
orient: "horizontal", //设置标签所在的位置有horizontal(横向的)，vertical(竖向的)
left: "center", //设置标签距离边界的距离，同时还有top、bottom、left、right
icon: "roundRect", //设置标签的形状，还有'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
top: "5%",
textStyle: {
color: "#333"
}, //设置标签的字体颜色、大小
data: ["月份"]
}, //设置图中每种颜色代表的内容
grid: {
left: "10%",
right: "10%",
top: "10%",
bottom: "10%"
}, //设置画布的上下左右留白
title: {
text: "Echarts",
subtext: "",
x: "center",
y: "top",
textAlign: "left",
textStyle: {
fontSize: "20",
color: "#333",
fontWeight: "600"
}
}, //设置标题的内容以及相关的位置与样式
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value",
minInterval: 1 //设置最小值，可以是y轴的最大值随数据的最大值变化而变化
},
series: [
{
name: "月份", //设置鼠标浮上去后显示提示框的标题
type: "bar", //设置图形是饼图还是柱状图，bar(柱状图)、pie(饼图)、line（折线图）
labelLine: {
normal: {
show: true,
length: 30 //设置饼图的引导线的长度
}
},
label: {
show: false,
// position: "center", //在不设置引导线的情况下，中间显示选中的内容
normal: {
// show: true,
// formatter: "{b} {c} 人"
formatter: "{b}({d}%)", //设置引导线内容显示的格式
textStyle: {
color: "#333",
fontWeight: "550",
fontSize: "20px"
}
}
},
color: ["#C23531"], //设置图形的颜色
data: [12, 12, 23, 45, 23, 34, 54, 12]
}
]
};
pa.setOption(option);
}
}
};
</script>
<style lang="less" scoped>
.home {
width: 600px;
height: 600px;
margin: 20px auto;
#my_echarts {
width: 100%;
height: 100%;
}
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
