echarts2() {
var chartDom = document.getElementById("main2");
var myChart = echarts.init(chartDom);
var option;
let piedata = [];//饼图数据
if (this.piedata !== null) {
this.piedata.forEach((item) => {
piedata.push({
value: item.value,
name: item.name,
itemStyle: {
borderWidth: 1,//给饼图中每一小块添加边框
borderColor: "white",//黑饼图中每一个小块的边框设置边框颜色
},
});
});
}
option = {
grid: {
width: "200px",
height: "150px",
},
color: [//修改饼图的显示颜色
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea",
],
tooltip: {//是否显示提示框组件
show: true,
// extraCssText: "width:300px;height:40px;line-height:20px;background:#fffff;", //修改提示框大小
trigger: "item",
formatter: "{b} : {c} 公里",
},
legend: {
orient: 'vertical',//设置底部文字横向或者纵向显示 'horizontal' 横向'vertical'纵向
itemWidth: 10,//设置底部文字前边icon的宽度
itemHeight: 10,//设置底部文字前变icon的高度
bottom: 60, //设置底部文字的位置
icon: "circle",//设置底部文字前icon的形状(可以每一个都试试) 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
left: "center",
textStyle: {
fontSize: 15,//设置文字大小
},
},
series: [
{
type: "pie",//设置图表类型
radius: "60%", //控制图表大小
center: ["50%", "35%"], //控制图表位置 第一个参数是左右 第二个参数是上下
selectedMode: "single",
labelLine: {
show: true, //隐藏指示线
},
label: {
// position: "inside",//让文字显示在饼状图里面
textStyle: {
fontSize: 15,
color: "#000",
// backgroundColor:"#ffff"
},
},
data: piedata,//饼图的数据
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
option && myChart.setOption(option);
}
饼状图配置项
于 2023-01-30 09:45:35 首次发布