Highcharts简单使用

官网： https://api.highcharts.com.cn/highcharts

https://echarts.apache.org/zh/api.html#echarts

Highcharts对比Echarts类似于 Office 和 WPS ，功能都挺全面的。

复杂点的折线图一般会用到：

rangeSelector定义缩放区间
scrollbar定义滚动轴样式

bar是条形图，column是柱状图。

bar是横着的柱状图，视觉上的y轴实际却是x轴。

tooltip数据提示框 (类似title属性)

legend图例

plotOptions 数据列配置

bar使用示例：

    var options = {
        chart: {
            type: 'bar'
        },
        credits: {
            enabled: false // 去掉水印
        },
        title: {
            text: ''
        },
		subtitle: {
			text: ''
		},
        xAxis: {
            categories: ['项目1', '项目2', '项目3'] // 变量
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    return this.value + '万';
                }
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            bar: {
                pointWidth: 32,
                stacking: 'normal', // 堆叠方式
                dataLabels: {
                    enabled: true,
                    allowOverlap: false, // 允许数据标签重叠
                    color: 'white',
                    align: 'left',
                    style: {
                        textShadow: 'none',
                        fontWeight: 'normal',
                        fontFamily: 'sans-serif'
                    },
                    formatter: function () {
                        var dd = (this.y / this.total) * 100;
                        return dd.toFixed(0) + '%';
                    }
                }
            }
        },
        tooltip: {
            shared: true,
            useHTML: true, // 使用html渲染
            formatter: function () {
                return '<span>this.y<span>';
            }
        },
        colors: ['#BBD5EF', '#5899DA'], // 定义到series的对象里也行
        series: [{
	    	name: '未完成量',
	   	    data: [16.73, 3.27, 33]
    	},{
	    	name: '已完成量',
	    	data: [3.36, 58.34, 90]
	    }]
    };
    Highcharts.chart('container', options);

<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<div id="container" style="height: 270px"></div>