自定义highcharts

自定义echarts图表组件相对于图表组件，提供给大屏设计者更大的、个性化编程的创造空间。要使用本组件，用户应具备以下基础技能：

• 掌握了一定的JavaScript基础知识；
• 对highcharts有一定的了解；

组件配置项配置

配置

基础属性

组件位置：包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

组件尺寸：包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高。再次单击进行解锁，解锁后宽高比不受限制。比例锁默认不锁定。

旋转：以组件的中心为中心点，进行旋转，单位为度（°）。手动输入角度值，控制组件的旋转角度；

• 单击图标，控制组件左右翻转样式；
• 单击图标，控制组件上下翻转样式。

透明：取值范围为0~100%。为0%时，组件隐藏；为100%时，组件完全显示。默认为100%。

组件属性

自定义JS脚本：通过此开关，可以优先使用在页面设置中引入的highcharts脚本文件进行图表渲染。此开关关闭时，默认只加载了highcharts.js、highcharts-more.js、highcharts-3d.js这3个js文件，能满足一些接触图表的渲染。

V6.8.2版本开始，乐创者服务根目录/lczCommon/charts/highcharts/9.2.2目录下自带了highchartsV9.2.2版本的打包js文件。
页面配置中引入highcharts的JS文件时，可以按照以下方式引入：
../lczCommon/charts/highcharts/9.2.2/highcharts.js
注意：如果要引入多个highcharts相关文件，要注意文件引入的顺序。

初始样式：图表样式脚本。

事件配置：为空时，将按数智大屏的规则进行处理；配置后，将覆盖数智大屏的处理结果。

例如：在自定义折线图的交互中配置，点击时大屏变量取图表变量chartValue值。
事件配置为空时，大屏变量取值为点击分类对应的系列值；
事件配置中配置：“outValues.chartValue = params.seriesName”,则最后大屏变量取值为点击分类对应的系列名称。

数据

组件数据格式

交互

支持鼠标点击事件。当点击图表时，触发交互事件：设置大屏变量、打开超链接、设置可见、设置JS事件。

例：
添加事件：点击时设置大屏变量“变量1”=图表数据“chartValue”。添加标题组件，数据为表达式“{变量1}”。

案例

制作步骤

1. 准备图表数据
2. 编写echarts构建代码

   案例1： 3D饼图

   案例效果

   

   配置过程

3. 准备图表数据（该数据由后台获取）

2. 编写highcharts构建代码

var totalcount = 0;
var seriesdata = [];
for (let i = 0; i < datas.length; i++) {
    let num = parseFloat(datas[i].num);
    totalcount += num;
    let rowData = [];
    rowData.push(datas[i].type);
    rowData.push(num);
      seriesdata.push(rowData)
}

myChart = highcharts.chart(chartDom, {
      chart: {
          type: 'pie',
          options3d: {
              enabled: true,
              //设置偏移角度
              alpha: 40
          },
          backgroundColor: 'rgba(0,0,255,0)'
      },
      title: {
          floating: true,
          text: totalcount,
          style: {
              fontSize: 32,
              fontFamily: 'Agency FB',
              color: 'rgba(255, 255, 255, 100)'
          }
      },
      subtitle: {
          text: '<br><br><br><br><br>总成本(亿元)',
          style: {
              fontSize: 16,
              fontFamily: 'TRENDS',
              color: 'rgba(144,191,209,100)'
          }
      },
      tooltip: {
          enabled: false
      },
      plotOptions: {
          pie: {
              //内半径
              innerSize: '155',
              //高度
              depth: 25,
              allowPointSelect: true,
              cursor: 'pointer',
              //外半径
              size: "185",
              point: {
                  events: {

                  }
              }
          }
      },
      credits: {
          enabled: false,
      },
      series: [{
          name: '绩效',
          data: [
              ['Bananas', 8],
              ['Kiwi', 3],
              ['Mixed nuts', 1],
              ['Oranges', 6]
          ],
          colors: ['rgb(92,178,255)', 'rgb(255,147,107)','rgb(255,243,107)', 'rgb(24,65,183)'],
          dataLabels: {
              connectorWidth: 0,
              enabled: false
          }
      }]
  }, function (c) { // 图表初始化完毕后的会掉函数
      // 环形图圆心
      var centerY = c.series[0].center[1],
      titleHeight = parseInt(c.title.styles.fontSize);
      // 动态设置标题位置
      c.setTitle({
          y: centerY + titleHeight / 2+10
      });
      c.setTitle(null, {
          y: centerY + titleHeight / 2+35
      })
  });

案例2:栅格圆环图

案例效果

配置过程

1. 准备图表数据（该数据由后台获取）

2. 编写highcharts构建代码

let data = 0;
if (datas.length>0) {
  data= datas[0]['上线车辆数']
}
console.log(datas,'1')

let splitNum = (100 - data) * 25 / 100
let dataset = []
let colorList = []
let index = 1;
while (index < splitNum * 2) {
    if (index % 2 == 0) {
        dataset.push(2)
        colorList.push('rgba(255,0,0,0)')
    } else {
        dataset.push(5)
        colorList.push('rgb(23, 33, 68)')
    }
    index++
}

while (index <= 50) {
    if (index % 2 == 0) {
        dataset.push(2)
        colorList.push('rgba(255,0,0,0)')
    } else {
        dataset.push(5)
        colorList.push('rgb(43,203,255)')
    }
    index++
}
//console.log(dataset)
myChart = Highcharts.chart(chartDom, {
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 55
        },
        marginTop: -40,
        backgroundColor: 'rgba(255,0,0,0)'
    },
    credits: {
        enabled: false
    },
    title: {
        // floating:true,
        text: data,
        style: {
            fontSize: 33,
            fontFamily: 'TRENDS',
            color: 'rgba(226, 238, 255, 100)'
        }
    },
    subtitle: {
        text: '%',
        style: {
            x:10,
            fontSize: 15,
            fontFamily: 'TRENDS',
            color: 'rgba(226, 238, 255, 100)'
        }
    },
    tooltip: {
        enabled: false
    },
    plotOptions: {
        series: {
            enableMouseTracking: false
        },
        pie: {
            innerSize: 120,
            depth: 0,
            size: 150,
            startAngle: -90,
            borderColor: '#ffffff',

        }
    },
    series: [{
            name: '货物金额',
            data: dataset,
            dataLabels: {
                connectorWidth: 0,
                enabled: false
            },
            animation:false,
            shadow: true,
            colors: colorList
        }
    ]
}, function (c) { // 图表初始化完毕后的会掉函数
    // 环形图圆心
    var centerY = c.series[0].center[1],
        titleHeight = parseInt(c.title.styles.fontSize);
    // 动态设置标题位置
    c.setTitle({
        y: centerY + titleHeight / 2 - 50,
        x: -8
    });
    c.setSubtitle({
        y: centerY + titleHeight / 2 - 50,
        x: 26
    })
});