ionic3中集成 highcharts echars图表插件

ionic项目中有时候会用到图表，如果我们自己通过canvas画一个图表还是比较麻烦的，这里介绍一下Ionic3集成HighCharts的方法。

网上你也会看到很多的方法，但是那些方法都是比较麻烦的。下面我们看看如何在angular4或者ionic3中集成highcharts echars图表插件。

ionic3中Hightchars的使用，此方法也适合angualr4、angualr5中使用，如下：


1.安装Hightchars 


    cnpm install highcharts --save


2.引入highcharts 

import Highcharts from 'highcharts';

3.ionic3视图里面定义一个放highcharts的div

 4.在对应的ionic3 ts文件中的生命周期函数ionViewDidEnter里面实例化Highcharts，注意要放在ionic3 dom加载完成的生命周期函数里面


   Highcharts.chart('container',{


    传入官方参数就可以实现
   })

ionViewDidEnter(){
    Highcharts.chart('container',{
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '2014 某网站各浏览器浏览量占比'
        },
        tooltip: {
            headerFormat: '{series.name}
',
            pointFormat: '{point.name}: {point.percentage:.1f}%'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.percentage:.1f} %',
                    
                }
            }
        },
        series: [{
            type: 'pie',
            name: '浏览器访问量占比',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['其他',   0.7]
            ]
        }]
    });

经历这几步我们就可以在ionic3中集成 highcharts echars图表插件