echarts绘制饼图+水波球图

效果图

代码

let val1dataPie = [
     { name: "test1", value: 10 },
     { name: "test2", value: 20 },
     { name: "test3", value: 30 },
     { name: "test4", value: 10 },
     { name: "test5", value: 40 },
     { name: "test6", value: 60 },
 ];

 let arr = ['middleLost', 57658, val1dataPie, '总计']

 const piegraph = {
     title: {
         show: true,//标题显示
         text: '统计',
         padding: 10,
         textStyle: {
             fontSize:14
         }
     },
     legend: {
         type:'scroll',
         orient: 'vertical',
         right: '10px',
         y:'center',
         top:'20px',
         bottom:'10px',
         icon:'emptyCircle',
         data: ["test1", "test2", "test3", "test4", "test5", "test6"]
     },
     tooltip: {
         show:true,
         trigger:'item',
         formatter: '{b}: {c} ({d}%)'
     },
     series: [{
             type: 'liquidFill',
             radius: '65%',
             itemStyle: {
                 normal: {
                     opacity: 0.4,
                     shadowBlur: 0,
                     shadowColor: 'blue'
                 }
             },
             name: arr[3],
             data: [0.6, 0.5, 0.4, 0.3],
             backgroundStyle: {
                 color: '#ffffff'
             },
             color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
                 color: '#79C8F2'
             }, {
                 offset: 1,
                 color: '#E4F3FC'
             }])],
             center: ['35%','50%'],
             label: {
                 normal: {
                     formatter: '',
                 }
             },
             outline: {
                 itemStyle: {
                     borderColor: '#86c5ff',
                     borderWidth: 0
                 },
                 borderDistance: 0
             }
         },{
             type: 'pie',
             radius: ['65%', '80%'],
             center: ['35%','50%'],
             color: ['#c487ee', '#deb140','#49dff0', '#034079', '#6f81da', '#00ffb4'],
             hoverAnimation: true, 设置饼图默认的展开样式
             label: {
                 show: false
             },
             labelLine: {
                 normal: {
                     show: false
                 }
             },
             itemStyle: {
                 normal: {
                     borderWidth: 2,
                     borderColor: '#fff',
                 },
                 emphasis: {
                     borderWidth: 0,
                     shadowBlur: 2,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
             },
             data: arr[2]
         }
     ]
 }
 
 this.setState({
     piegraph:piegraph
 })