let data = [{ name: "工程维修", itemStyle: { color: { type: 'linear', x: 0, y: 1, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#245547' // 0% 处的颜色 }, { offset: 1, color: '#3BD3A8' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } }, value: 25, }, { name: "垃圾分类", value: 15, itemStyle: { color: { type: 'linear', x: 0, y: 1, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#515B37' // 0% 处的颜色 }, { offset: 1, color: '#B4D16A' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } }, }, { name: "环境卫生", value: 15, itemStyle: { color: { type: 'linear', x: 0, y: 1, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#254C5A' // 0% 处的颜色 }, { offset: 1, color: '#3AACD2' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } }, }, { name: "资产维护", value: 10, itemStyle: { color: { type: 'linear', x: 0, y: 1, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#346041' // 0% 处的颜色 }, { offset: 1, color: '#67D171' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } }, }, { name: "长三角联动", value: 10, itemStyle: { color: { type: 'linear', x: 0, y: 1, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#584732' // 0% 处的颜色 }, { offset: 1, color: '#C5914D' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } }, }, { name: "纠纷调解", value: 15, itemStyle: { color: { type: 'linear', x: 0, y: 1, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#2F545F' // 0% 处的颜色 }, { offset: 1, color: '#68CED3' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } }, }, { name: "河道保洁", value: 5, itemStyle: { color: { type: 'linear', x: 0, y: 1, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#2F3F5E' // 0% 处的颜色 }, { offset: 1, color: '#688DD3' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } }, }, { name: "信访调解", value: 5, itemStyle: { color: { type: 'linear', x: 0, y: 1, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#30325F' // 0% 处的颜色 }, { offset: 1, color: '#6C68D3' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } }, }, ] option = { calculable: false, tooltip: { show: true, trigger: 'item' }, series: [{ type: 'treemap', left: '0', right: '0', top: '0', bottom: '0', label: { show: true, formatter: (params) => { return params.value + '%' + '\n' + params.name // let str = `

${params.value}

${params.name}

`; // return str }, fontSize: 20, fontWeight: 'bold', ellipsis: true }, breadcrumb: { show: false }, data: data, roam: false, nodeClick: false, }] }

Echarts在线免费图表