我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › ABI使用highchart

ABI使用highchart

复制链接 | 收藏本帖

1662

: zhuhc 初学数据Lv2

发表于2022-1-29 14:51

楼主

1、下载HighChart的js
https://code.highcharts.com.cn/index.html
2、系统管理->资源管理器中上传下载到的js到相应目录
3、拖入一个echart自定义组件，编写如下代码：

EUI.include("vfs/root/js/jquery.min.js");
EUI.include("vfs/root/js/highcharts.js");

var chart = {
   type: 'column'
};
var title = {
   text: '堆叠柱形图'
};
var xAxis = {
   categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
};
var yAxis ={
   min: 0,
   title: {
      text: '水果总消费量'
   },
   stackLabels: {
      enabled: true,
      style: {
         fontWeight: 'bold',
         color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
   }
};
var legend = {
   align: 'right',
   x: -30,
   verticalAlign: 'top',
   y: 25,
   floating: true,
   backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
   borderColor: '#CCC',
   borderWidth: 1,
   shadow: false
};
var tooltip = {
   formatter: function () {
      return '<b>' + this.x + '</b><br/>' +
         this.series.name + ': ' + this.y + '<br/>' +
         'Total: ' + this.point.stackTotal;
   }
};
var plotOptions = {
   column: {
      stacking: 'normal',
      dataLabels: {
         enabled: true,
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
         style: {
            textShadow: '0 0 3px black'
         }
      }
   }
};
var credits = {
   enabled: false
};
var series= [{
      name: 'John',
         data: [5, 3, 4, 7, 2]
      }, {
         name: 'Jane',
         data: [2, 2, 3, 2, 1]
      }, {
         name: 'Joe',
         data: [3, 4, 4, 2, 5]
}];

var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#HHH9').highcharts(json);

4、实现效果如下：