Highcharts图表

组件名称：Highcharts图表

组件样式：

组件说明：

Highcharts图表，是通过直接调用javascript eval方法，执行编辑器内字符串，生成图表。

注意事项：

1. 请按照官方API编写图表配置项。

2. 不能通过Highcharts.chart('renderTo',option)初始化图表,只能传入option渲染图表。

3. 动态更新图表需要使用this.myChart对象更新。

4. 编辑器供了全局jquery,$,Highcharts对象。

5. 如果图表不能正常渲染，请检查控制台是否报错。

请求方式：POST

https://report.tingyun.com/HighCharts

示例：

//根据highcharts官方API 配置option属性，注意图标配置项必须命名option，否则不能正常渲染。
var option = {
    chart: {
        type: 'column'
    },
    title: {
        text: '2015年1月-5月，各浏览器的市场份额'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: '总的市场份额'
        }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },
    tooltip: {
        headerFormat: '{series.name}
',
        pointFormat: '{point.name}: {point.y:.2f}% of total
'
    },
    series: [{
        name: '浏览器品牌',
        colorByPoint: true,
        data: [{
            name: 'Microsoft Internet Explorer',
            y: 56.33
        }, {
            name: 'Chrome',
            y: 24.03
        }, {
            name: 'Firefox',
            y: 10.38
        }, {
            name: 'Safari',
            y: 4.77
        }, {
            name: 'Opera',
            y: 0.91
        }, {
            name: 'Proprietary or Undetectable',
            y: 0.2
        }]
    }]
};

//demo 动态更新图表；
//必须通过 this.myChart 动态更新图表；
//编辑器提供了全局jquery,$,echarts对象。
this.demointer = setInterval(function () {
    var data = this.myChart.series[0].data;
    var newdata = [];
    for (var i = 0; i < data.length; i++) {
        newdata[i]={name:data[i].name,y:Math.floor(Math.random()*100)};
    }
    this.myChart.update({series: [{    data: newdata}]});
}.bind(this), 3000);