文字气泡图

echarts常用实例 随笔 第1张 
let mydata = [[10,20,'北京',50],[1,15,'上海',80],[5,10,'武汉',50]];
option = {
xAxis: {},
yAxis: {},
series: [{
type: 'scatter',
symbolSize: d => d[3],
data: mydata,
label:{
show: true,
position: 'inside',
color:'#000',
formatter: d => {
let txt = `{style_value|${d.data[3]}}{style_${d.data[2].charCodeAt(0).toString(16)}|${d.data[2]}}`;

return txt;
},
rich:(function(){ // 匿名函数自执行(IIFE)
let style = {
style_value:{
color:'#fff',
width: '100%',
align:'center',
},
};
mydata.forEach(d => {

let data = `style_${d[2].charCodeAt(0).toString(16)}`;
style[data] = {
color:'#000',
width: '100%',
align:'center',
padding:[0,0,d[3] + 20,0]
}
});
return style
})(),
}
}]
};
View Code

环形嵌套数据图

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 echarts常用实例 随笔 第3张 
app.title = '嵌套环形图';

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    series: [
        
        {
            name:'访问来源',
            type:'pie',
            radius: ['40%', '55%'],
             color: ['#FF5166', '#008CFF', '#3766FF', '#57F4FF'],
            label: {
                normal: {
                    formatter: '{b} \n{d}% ',
                   
                   
                }
            },
            data:[
                {value:1048, name:'百度'},
                {value:251, name:'谷歌'},
                {value:147, name:'必应'},
                {value:102, name:'其他'}
            ]
        }
    ]
};
View Code

angular如何引用echarts

ts主要代码

let myChart = echarts.init(document.getElementById('route-pie'));
myChart.setOption(this.echarts自定义的名称);
html代码
<div id=“routepie”></div>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄