import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
// legend: {
// data: ['耕地', '建设用地', '林地', '草地', '低效用地'],
// top:'10%'
// },
// 图例设置
legend: [
{
top: "10%",
right: "66%",
textStyle: { // 图例文字样式
color: "red",
fontSize: 14,
fontFamily: "微软雅黑"
},
itemStyle:{ // 图例图形的形状样式
color: "#0DDE8C",
opacity:1,
},
itemWidth: 20, // 图例图形的宽度
itemHeight: 1, // 图例图形的高度
data: [
{
name: "搜索引擎", // 图例文字内容
icon: "rect" // 图例图形的形状,有多个可选值:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none',
//也可引用自定义的图片
// icon: "image://https://p1.pstatp.com/list/dfic-imagehandler/8ac89fbe-b30c-4ba0-8d75-02c0f60a7ea6"
}
]
},
{
top: "10%",
right: "56%",
itemStyle:{ // 图例图形的形状样式
color: "#ccc",
opacity:1,
},
data: [
{
name: "直接访问",
icon: "roundRect" //引用自定义的图片
}
]
},
{
top: "10%",
right: "45%",
itemStyle:{ // 图例图形的形状样式
color: "#04DFCF",
opacity:1,
},
data: [
{
name: "邮件营销",
icon: "diamond" //引用自定义的图片
}
]
},
{
top: "10%",
right: "35%",
itemStyle:{ // 图例图形的形状样式
color: "#FC8541",
opacity:1,
},
data: [
{
name: "联盟广告",
icon: "circle" //引用自定义的图片
}
]
},
{
top: "10%",
right: "25%",
itemStyle:{ // 图例图形的形状样式
color: "#E3B450",
opacity:1,
},
data: [
{
name: "视频广告",
icon: "triangle" //引用自定义的图片
}
]
},
],
series: [
{
// 第一环
type: 'pie',
zlevel: 1,
silent: true,
radius: ['40%', '41%'],
hoverAnimation: false,
color: 'rgba(88,142,197,0.1)',
// animation:false, //charts3 no
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [1]
},
{ //第二环
name: '访问来源',
type: 'pie',
radius: ['45%', '56%'],
hoverAnimation: false,//鼠标事件
label:{
show:false
},
data: [
{value: 80, name: '搜索引擎',itemStyle : {normal : {color :'#0DDE8C',opacity:'0.1'}}},
{value: 45, name: '直接访问',itemStyle : {normal : {color :'#FDFDFD',opacity:'0.1'}}},
{value: 30, name: '邮件营销',itemStyle : {normal : {color :'#04DFCF',opacity:'0.1'}}},
{value: 61, name: '联盟广告',itemStyle : {normal : {color :'#FC8541',opacity:'0.1'}}},
{value: 54, name: '视频广告',itemStyle : {normal : {color :'#E3B450',opacity:'0.1'}}},
]
},
{ //第三环
name : '访问来源',
type : 'pie',
radius : ['57%', '60%'],
labelLine: {
length : 40,
},
itemStyle:{ //中间断点间隔
borderWidth :3,
borderColor:'#fff'
},
//hoverAnimation: false, //鼠标事件
label: {
formatter: '{b|{b}:}{c}万访问量{abg|}\n{hr|}\n {a|{a}} ',
borderColor: '#8C8D8E',
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 2,
height: 0
},
b: {
color: '#4C5058',
lineHeight: 33
},
c:{
color:'rgba(255, 255, 255, 0.65)',
fontSize: 14,
fontWeight: 'bold',
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
data: [
{value: 80, name: '搜索引擎',itemStyle : {normal : {color :'#0DDE8C'}}},
{value: 45, name: '直接访问',itemStyle : {normal : {color :'#FDFDFD'}}},
{value: 30, name: '邮件营销',itemStyle : {normal : {color :'#04DFCF'}}},
{value: 61, name: '联盟广告',itemStyle : {normal : {color :'#FC8541'}}},
{value: 54, name: '视频广告',itemStyle : {normal : {color :'#E3B450'}}},
]
},
]
};
option && myChart.setOption(option);
echarts 多个环形嵌套 与 legend 图例图形样式
于 2021-07-23 10:36:01 首次发布