highchart的基本使用和部分美化

highchart的基本使用

使用highchart之前需要下载highchart的js
可以去官网看看并下载:
https://www.highcharts.com.cn/demo/highcharts/spline-symbols

我直接选的下面这种方式

然后在需要 highchart 的地方进行导入

<script src="http://cdn.highcharts.com.cn/highcharts/10.0.0/highcharts.js"></script>

然后在创建一个处理highchart的文件的js和当前页面的js并导入进来

<script src="{{ buildStaticUrl('/js/charts.js') }}"></script>
<script src="{{ buildStaticUrl('/js/index/index.js') }}"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/10.0.0/highcharts.js"></script>

找到想要的折线图在点击js

可以去看看官网写的js，然后，我做的方法是将处理highchart单独写一个js，用当前页面的js去调用处理highchart的js
处理highchart的js，代码在最后

当前页面使用Ajax去访问服务器成功后并调用处理highchart的js

服务器需要返回的数据格式：

效果图：

这样感觉有点丑我们还可以做美化

美化效果效果：

代码：

渲染，美化highchart的js代码

：

/**
 * Created by redmi on 2022/5/10.
 */
;
var charts_ops = {
    //美化折线图
    setOption: function () {
        Highcharts.setOptions({
            chart: {},
            exporting: {
                enabled: false
            },
            legend: {
                //enabled:false
            },
            credits: {
                enabled: false
            },
            colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
                '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4', '#E93EFF'],
            title: '',
            xAxis: {
                tickWidth: 0,
                lineWidth: 0,
                gridLineColor: '#eee',
                //gridLineWidth: 1,
                crosshair: {
                    width: 1,
                    color: '#ebebeb'
                }
            },
            yAxis: {
                gridLineColor: '#eee',
                gridLineWidth: 1,
                title: ''
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    pointWidth: 20,
                    borderWidth: 0
                },
                series: {
                    marker: {
                        enabled: false
                    },
                },
                line: {
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 2
                        }
                    }
                }
            },
            tooltip: {
                backgroundColor: '#404750',
                borderWidth: 0,
                shadow: false,
                headerFormat: '',
                footerFormat: '',
                shared: true,
                useHTML: true,
                style: {
                    color: '#fff',
                    padding: '5px'
                }
            },
            lang: {
                noData: "暂无数据"
            },
            noData: {
                style: {
                    fontWeight: 'bold',
                    fontSize: '15px',
                    color: '#303030'
                }
            }
        });
    },

    //渲染数据
    drawLine: function (target, data) {
        var chart = target.highcharts({
            chart: {
                type: 'spline'
            },


            xAxis: {
                categories: data.categories
            },
            series: data.series,

            // 标题出现在右上角
            legend: {
                enabled: true,
                align: 'right',
                verticalAlign: 'top',
                x: 0,
                y: -15
            }

        });
        return chart
    }
}

当前页面js

/**
 * Created by redmi on 2022/5/10.
 */
;
var dashboard_index_ops = {
    init: function () {
        this.drawChart()
    },
    drawChart: function () {

        $.ajax({
            url:common_ops.buildUrl("/chart/dashboard"),
            dataType: "json",
            success:function (res) {
                charts_ops.drawLine($("#member_order"),res.data)
            }
        });


        $.ajax({
            url:common_ops.buildUrl("/chart/finance"),
            dataType: "json",
            success:function (res) {
                charts_ops.drawLine($("#finance"),res.data);
                charts_ops.setOption();
            }
        });


    }
};

$(document).ready(function () {
    dashboard_index_ops.init()
});

服务器需要返回的数据格式

resp = {"code": 200, "msg": "操作成功", "data": {}}
 data = {
     "categories":[],
     "series":[
         {
             "name":"会员总数",
             "data":[]
         },
         {
             "name": "订单总数",
             "data": []
         }
     ]
 }