Echarts在线免费图表

 
            var sourceData = [{
   name: '风能',
   nameValue: 3,
   valueUnit: "亿"
},
{
   name: '太阳能',
   nameValue: 1,
   valueUnit: "亿"
},
{
   name: '天然气',
   nameValue: 7,
   valueUnit: "亿"
},
{
   name: '外调煤电',
   nameValue: 7,
   valueUnit: "亿"
},
{
   name: '外调非煤电',
   nameValue: 1,
   valueUnit: "亿"
},
{
   name: '油品',
   nameValue: 4,
   valueUnit: "亿"
},
{
   name: '氢能',
   nameValue: 0.5,
   valueUnit: "亿"
},
{
   name: '发电环节',
   nameValue: 9,
   valueUnit: "亿"
},
{
   name: '传输环节',
   nameValue: 16,
   valueUnit: "亿"
},
{
   name: '电力需求',
   nameValue: 9,
   valueUnit: "亿"
},
{
   name: '天然气需求',
   nameValue: 1,
   valueUnit: "亿"
},
{
   name: '损失',
   nameValue: 9,
   valueUnit: "亿"
},
{
   name: '工业领域',
   nameValue: 10.8,
   valueUnit: "亿"
},
{
   name: '居住建筑',
   nameValue: 0.6,
   valueUnit: "亿"
},
{
   name: '公共建筑',
   nameValue: 1,
   valueUnit: "亿"
},
{
   name: '交通领域',
   nameValue: 2.1,
   valueUnit: "亿"
}
];
var sangjiColor = ['#f7a365', '#44eda1', '#00ffff', '#00baff', '#f8b551', '#7ecef4', '#7ecef4', '#7ecef4', '#f7a365', '#44eda1', '#00ffff', '#00baff', '#f8b551', '#7ecef4', '#7ecef4', '#7ecef4'];
var itemStyleSource = [];
for (let d = 0; d < sourceData.length; d++) {
   sourceData[d].itemStyle = {
      normal: {
         color: sangjiColor[d]
      }
   }
   itemStyleSource.push(sourceData[d]);
}

option = {
   tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      formatter: function (o) {
         if (o.dataType !== "edge") {
            return '';
         }
         return o.data.source + ' - ' + o.data.target + "：" + o.data.value + '%'
      }
   },
   backgroundColor: "#013d5a",
   series: [{
      type: 'sankey',
      layout: 'none',
      top: "12%",
      bottom: '21%',
      left: '3%',
      // layoutIterations: 0,
      focusNodeAdjacency: 'allEdges',
      data: itemStyleSource,
      links: [{
         source: '风能',
         target: '发电环节',
         value: 3
      },
      {
         source: '太阳能',
         target: '发电环节',
         value: 1
      },
      {
         source: '天然气',
         target: '发电环节',
         value: 5
      },
      {
         source: '天然气',
         target: '传输环节',
         value: 2
      },
      {
         source: '外调煤电',
         target: '传输环节',
         value: 7
      },
      {
         source: '外调非煤电',
         target: '传输环节',
         value: 1
      },
      {
         source: '油品',
         target: '工业领域',
         value: 3
      },
      {
         source: '油品',
         target: '交通领域',
         value: 1
      },
      {
         source: '氢能',
         target: '交通领域',
         value: 0.5
      },
      {
         source: '发电环节',
         target: '损失',
         value: 3
      },
      {
         source: '发电环节',
         target: '传输环节',
         value: 6
      },
      {
         source: '传输环节',
         target: '损失',
         value: 6
      },
      {
         source: '传输环节',
         target: '电力需求',
         value: 6
      },
      {
         source: '传输环节',
         target: '天然气需求',
         value: 1
      },
      {
         source: '电力需求',
         target: '工业领域',
         value: 7
      },
      {
         source: '电力需求',
         target: '居住建筑',
         value: 0.5
      },
      {
         source: '电力需求',
         target: '公共建筑',
         value: 1
      },
      {
         source: '电力需求',
         target: '交通领域',
         value: 0.5
      },
      {
         source: '天然气需求',
         target: '工业领域',
         value: 0.8
      },
      {
         source: '天然气需求',
         target: '居住建筑',
         value: 0.1
      },
      {
         source: '天然气需求',
         target: '交通领域',
         value: 0.1
      }
      ],
      label: {
         normal: {
            color: "#fff",
            fontSize: 12,
            formatter: function (params, i) {
               console.log(params);
               return "{white|" + params.data.name + "\n}";
            },
            rich: {
               white: {
                  fontSize: 12,
                  padding: [-5, 0, 0, 0]
               }
            }
         }

      },
      lineStyle: {
         normal: {
            color: 'source',
            curveness: 0.5
         }
      },
      itemStyle: {
         normal: {
            borderWidth: 1,
            borderColor: 'transparent'
         }
      }
   }]
}