带外缘的 echars 戒指
最编程
2024-07-09 16:48:24
...
function mychart1() {
myChart1 = echarts.init(document.getElementById('profitTotal'));
let echartData = [{
name: '费用',
value: 30,
},
{
name: '投资',
value: 70,
},];
let xAxisData = echartData.map(v => v.name);
let yAxisData = echartData.map(v => v.value);
option = {
color:['#03A08C','#1D6CDC'],
legend: {
orient: 'vertical', // 'vertical' ,'horizontal'
x: 'right', // 'center' | 'left' | 'right' | {number},
y: 'center', // 'center' | 'bottom' | {number}
padding:[0,80,0,0],
align:'left',
textStyle: { //图例文字的样式
color: '#81ACCF',
fontSize: 14,
fontWeight: '100',
},
// icon: "rect", // 字段控制形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 18, // 设置宽度
itemHeight: 10, // 设置高度
// itemGap: 40, // 设置间距
selectedMode:false,//取消图例上的点击事件
data:xAxisData,
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['25%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#0A284C',
borderWidth: 2,
},
label: {
normal: {
position: 'inner',
show : false,
formatter:'{c}%'
},
},
labelLine: {
normal: {
show: false
}
},
data:echartData,
},
{
name: '外边框',
type: 'pie',
radius: ['25%', '80%'],
avoidLabelOverlap: false,
itemStyle: {
normal:{
color:function(params){//渐变色
var colorList = ['rgba(3, 160, 140, 0.2)','rgba(3, 105, 211, 0.2)'];
return colorList[params.dataIndex]
},
// color:'rgba(62,109,255,0.4)',
borderColor: '#0A284C',
borderWidth: 2,
},
},
label: {
normal: {
position: 'inner',
show : true,
color:'#ffffff',
formatter:'{c}%'
},
},
labelLine: {
normal: {
show: false
}
},
data:echartData,
}]
};
myChart1.on('mouseover', 'series.pie',function(params) {
myChart1.dispatchAction({
type: 'highlight',
dataIndex: params.dataIndex,
seriesIndex: 0,
});
});
myChart1.on('mouseout', 'series.pie', function(params) {
myChart1.dispatchAction({
type: 'downplay',
dataIndex: params.dataIndex,
seriesIndex: 0,
});
});
myChart1.setOption(option);
}
推荐阅读