1.开发环境 vue+element+echarts
2.电脑系统 windows10 专业版
3.在开发的过程中,我们总是会使用到图表,也有很多框架以及图表框架,这里我选择的是 echarts,本次我使用的是 echarts中的饼图,效果图如下:
4.在这里主要看到与官方的区别是,左边方形的颜色和右边饼图直接的间距,这个是怎么配置的呢?代码如下:
// 指定图表的配置项和数据
let option: any = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
legend: {
orient: "vertical",
left: 20,
itemWidth: 30,
itemHeight: 16,
textStyle: {
fontSize: 16, //字体大小
color: 'wheat', //字体颜色
},
},
series: [
{
name: "访问来源",
type: "pie",
left:40,
radius: ["24%", "75%"], //控制饼图的大小
label: {
formatter: "{hr|}n {b|{b}：}{c} {per|{d}%} ",
backgroundColor: "#eee",
borderColor: "#aaa",
borderWidth: 4, //控制 悬浮信息边框的大小
borderRadius: 4,
rich: {
a: {
color: "#999",
lineHeight: 22,
align: "center",
},
hr: {
borderColor: "#aaa",
width: "100%",
borderWidth: 0.5,
height: 0,
},
b: {
fontSize: 16,
lineHeight: 33,
},
per: {
color: "#eee",
backgroundColor: "#334455",
padding: [2, 4],
borderRadius: 2,
},
},
},
data: [
{
value: 335,
name: "直达",
},
{
value: 310,
name: "邮件营销",
},
{
value: 234,
name: "联盟广告",
},
{
value: 135,
name: "视频广告",
},
{
value: 1048,
name: "百度",
},
{
value: 251,
name: "谷歌",
},
{
value: 147,
name: "必应",
},
{
value: 102,
name: "其他",
},
],
},
],
};
5.其实主要的配置代码:
legend: {
orient: "vertical",
left: 20,//左边方形和左边的间距
itemWidth: 30,//左边方形的宽度
itemHeight: 16,//左边放行的高度
textStyle: {
fontSize: 16, //左边方形字体大小
color: 'wheat', //左边方形字体颜色
},
},
series 属性下面是的left:40,//表示右边的饼图和左边方形之间的间距
6.本期的教程到了这里就结束啦,是不是很nice,是不是很棒,让我们一起努力走向巅峰!既然我们选择了这个领域,就不要认输,不要放弃,不要低头,加油!
