Echarts在线免费图表

 
            const color = ['#ffdc2b', '#4d8cfd', '#45e6de'];
const datas = [
   {
      name: '服务业企业',
      // num:''
      value: 25,
   },
   {
      name: '批发零售企业',
      value: 75,
   },
   {
      name: '住宿餐饮企业',
      value: 75,
   },
];
let sum = 0;
for (var i of datas) {
   sum += i.value;
}
const title = {
   name1: '金额',
   name2: '占比',
   // value: sum,
   // unit: '家',
   //   textStyle: {
   //       fontSize: 30,
   //       color: "rgba(255, 0, 0, 1)"
   //  },
};
const rich = {
   name: {
      color: '#DEDEDE',
      fontSize: 16,
      align: 'left',
      padding: [0, 10, 20, 0],
   },
   name1: {
      color: '#585857',
      fontSize: 20,
      Width: 12,
      align: 'left',
      padding: [0, 0, 0, 10],
   },
   name2: {
      color: '#585857',
      fontSize: 20,
      align: 'left',
      padding: [0, 0, 0, 10],
   },
   value: {
      color: '#ccc',
      fontSize: 14,
      align: 'left',
   },
   title: {
      //  color: '#fff',
      color: "#C60020",
      fontWeight:'bold',
      fontSize: 40,
   },
   // titleUnit: {
   //    color: '#fff',
   //    fontSize: 16,
   //    padding: [15, 0, 0, 0],
   // },
   // titleValue: {
   //    color: '#fff',
   //    fontSize: 40,
   //    fontWeight: 600,
   //    padding: [15, 5, 5, 5],
   // },
};
let option = {
   color,
   backgroundColor: '#F6F7FB',
   legend: {
      orient: 'vertical',
      icon: 'circle',
      x: '50%',
      y: 'center',
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 20,
      width: '263',
      align: 'left',
      textStyle: {
         color: '#D7E5FF',
         rich,
      },
      formatter: function (name) {
         debugger;
         let res = datas.filter(v => v.name === name)
         let str = ''
         str = '{name1|' + res[0].name + '}{name1|' + res[0].value + '%}'+ '{name1|' + res[0].value + '%}'
         return str
      },
   },

   series: [
      // {
      //    type: 'pie',
      //    center: ['30%', '50%'],
      //    radius: ['40%', '50%'],
      //    data: datas,
      //    startAngle: 180,
      //    label: {
      //       show: false,
      //    },
      // },
      {
         type: 'pie',
         center: ['30%', '50%'],
         radius: ['25%', '30%'],
         data: datas,
         startAngle: 180,
         label: {
            show: true,
            position: 'center',
            formatter: () => `{title|${title.name1}}\n{title|${title.name2}}`,
            rich,
         },
      },
   ],
};