纯面积关系图ECharts Gallery

20:11:45图表已生成
代码
         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 = `<div>
                         //             <div style="display: flex">
                         //                 <div style="font-size: 26px">${params.value}</div>
                         //                 <div style="font-size: 18px">%</div>
                         //             </div>
                         //             <div>${params.name}</div>
                         //         </div>`;
                         // return str
                     },
                     fontSize: 20,
                     fontWeight: 'bold',
                     ellipsis: true
                 },
                 breadcrumb: {
                     show: false
                 },
                 data: data,
                 roam: false,
                 nodeClick: false,

             }]
         }
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
