echarts 与 highcharts 的区别

日常用echarts已经满足需求了，而且echarts的社区写的真是beauty。

在某次要写立体的饼图的时候，找到了highcharts 它支持3D的

---

	产地	底层
echarts	国产（百度）	canvas
highcharts	外产、分版本收费	svg

---

从底层来看他们真是相辅相成的。

图表上如果需要蛮多的交互，推荐用highcharts，但是我还没找到它的社区

官网：https://www.highcharts.com/

图表支持成度

image.png

放一个项目中的例子

image.png

<tempalte>
    <div id="health-container" style="width:55%; height:400px;"> </div>
</template>

import Highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(Highcharts)


 const option = {
    chart: {
      type: 'pie',
      // height: 20,
      options3d: {
        enabled: true, // 是否启用3D功能
        alpha: 58,
        beta: 0
      },
      frame: { // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
        // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
        // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
        bottom: {
          size: 1,
          color: 'transparent'
        },
        side: {
          size: 1,
          color: 'transparent'
        },
        back: {
          size: 1,
          color: 'transparent'
        }
      },
      backgroundColor: 'rgba(0,0,0,0)'
    },
    title: false,
    credits: { // 关闭版权信息的标签
      enabled: false
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        depth: 50,
        innerSize: 80, // 环状图中间圆环的大小
        dataLabels: {
          enabled: false, // 是否展示数据值
          format: '{point.percentage:.1f}% <br>{point.name}',
          style: {
            fontSize: '16px',
            fontWeight: '400',
            color: '#27b6ff',
            textOutline: 'none'
          }
        },
        states: {
          halo: {
            pacity: 1
          }
        },
        borderWidth: 0.5,
        center: ['50%', '20%']
      }
    },
    series: [
      // {
      //   type: 'pie',
      //   size: '100%',
      //   zIndex: 1,
      //   data: [
      //     { 'name': '35岁以下代表', y: 45, color: 'rgba(2,126,126,.9)' },
      //     { 'name': '种植业保险', y: 70, color: 'rgba(0,75,187,1)' },
      //     { 'name': '种植业保险', y: 70, color: '#00fcff' }


      //   ],
      //   label: {
      //     show: true
      //   }
      // },
      {
        type: 'pie',
        depth: 70,
        zIndex: 2,
        size: '100%',
        dataLabels: {
          enabled: false
        },
        data: [
          { 'name': '55岁以上代表', y: 34, color: '#2483ff' },
          { 'name': '36~55岁代表', y: 88, depth: 90, color: '#19b1fb', sliced: true,
            selected: true },
          { 'name': '35岁以下代表', y: 4, color: '#00fcff' }

        ]
      }
    ]
  }


 Highcharts.chart('health-container', options)