标签：show color item rgb 图例 symbolSize offset Echarts 气泡

methods:{
initChart(){
let colors = [“rgb(148, 91, 51)”, “rgb(0, 147, 103)”, “rgb(52, 99, 162)”];
// 计算数据总和 reduce
let result = this.plantCap.reduce(
(sum, e) => Number(sum) + Number(e.value),
0
);
var datalist = [
{
offset: [10, 80],
symbolSize: 80,
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: “rgb(46, 42, 50, .5)”,
},
{
offset: 1,
color: “rgb(148, 91, 51,.5)”,
},
]),
},
{
offset: [38, 70],
symbolSize: 84,
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: “rgb(10, 55, 61, .5)”,
},
{
offset: 1,
color: “rgb(0, 147, 103, .5)”,
},
]),
},
{
offset: [66, 80],
symbolSize: 90,
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: “rgb(8, 44, 84, .5)”,
},
{
offset: 1,
color: “rgb(52, 99, 162, .5)”,
},
]),
},
];
var datas = [];
for (var i = 0; i < this.plantCap.length; i++) {
var item = this.plantCap[i];
var itemToStyle = datalist[i];
datas.push({
// name: item.name + “\n” + item.value,
name:
((item.value / result) * 100).toFixed(2) +
“%” +
“\n” +
“\n” +
“\n” +
“\n” +
item.num +
“人”, //气泡的百分比,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 20,
lineHeight: 17,
color: item.color,
padding: [68, 0, 0, 0],
},
},
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity,
borderWidth: “2”,
borderColor: item.color,
borderType: “solid”,
},
},
});
}
let option = {
// backgroundColor: “#20203e”,
color: colors,
grid: {
show: false,
top: 10,
bottom: 10,
containLabel: true,
},
tooltip: {
trigger: “item”,
// backgroundColor: “rgba(0,0,0,0.9)”,
formatter: function (params) {
let titleName;
if (params.dataIndex == 2) {
titleName = “半年以下”;
} else if (params.dataIndex == 1) {
titleName = “半年到一年”;
} else if (params.dataIndex == 0) {
titleName = “一年以上”;
}
return (
‘’ +
titleName +
“” +
// params.seriesName +
“
” +
params.marker +
‘’ +
params.data[“name”] +
“\n” +
“”
);
},
},
legend: {
show: true,
left: 85,
bottom: 50,
trigger: “axis”,
// 图例文字颜色
textStyle: {
fontSize: “20”,
fontWeight: “bold”,
fontFamily: “SourceHanSansCN”,
color: “#A0B2D3”,
},
icon: “rect”,
itemWidth: 10,
itemHeight: 10,
},
xAxis: [
{
gridIndex: 0,
type: “value”,
show: false,
min: 0,
max: 100,
nameLocation: “middle”,
nameGap: 5,
},
],
yAxis: [
{
gridIndex: 0,
min: 0,
show: false,
max: 100,
nameLocation: “middle”,
nameGap: 30,
},
],
series: [
{
name: “一年以上”,
// color:‘red’,
type: “scatter”,
symbol: “circle”,
symbolSize: 120,
label: {
normal: {
show: true,
formatter: “{b}”,
color: “#fff”,
textStyle: {
fontSize: “20”,
fontFamily: “BoldCondensed”,
},
},
},
dataLabels: {
allowOverlap: true,
},
data: datas,
},
{
name: “半年到一年”,
// color:‘red’,
type: “scatter”,
symbol: “circle”,
symbolSize: 120,
label: {
normal: {
show: true,
formatter: “{b}”,
color: “#fff”,
textStyle: {
fontSize: “20”,
fontFamily: “BoldCondensed”,
},
},
},
data: datas,
},
{
name: “半年以下”,
type: “scatter”,
symbol: “circle”,
symbolSize: 120,
label: {
normal: {
show: true,
formatter: “{b}”,
color: “#fff”,
textStyle: {
fontSize: “20”,
fontFamily: “BoldCondensed”,
},
},
},
data: datas,
},
],
};
let myChart = this.$echarts.init(document.getElementById(“syscBubleChart”));
myChart.setOption(option);
window.addEventListener(“resize”, function (https://www.yingbatiyu.com/) {
myChart.resize();
});
}
}

标签：show,color,item,rgb,图例,symbolSize,offset,Echarts,气泡
来源： https://blog.csdn.net/yezikeji/article/details/114277102

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。