EChart使用心得（三）K线图折线图…

最新推荐文章于 2024-08-08 18:06:31 发布

qq_37320586

最新推荐文章于 2024-08-08 18:06:31 发布

阅读量5.3k

点赞数

本文链接：https://blog.csdn.net/qq_37320586/article/details/56014818

版权

本文介绍了如何使用ECharts库创建K线图和折线图，详细展示了配置代码，包括设置标题、提示框、图例、工具箱、数据缩放控件、坐标轴和数据标注等，提供了实际的ECharts实例。

摘要由CSDN通过智能技术生成

代码如下：数据改动，估计我最后在写一个多图联动就不搞了

var myChart = echarts.init(document.querySelector("#main"));

      var option = {
   

    title : {
   

        text: '博雅数据'//左上角名字
    },

    tooltip : {             //提示框
        trigger: 'axis',    //触发类性
        formatter: function (params) {
   

            var res = params[0].name;

            for (var i = params.length - 1; i >= 0; i--) {
   

                if (params[i].value instanceof Array) {
   

                    res += '

' + params[i].seriesName;

                    res += '

  开盘 : ' + params[i].value[0] + '  最高 : ' + params[i].value[3];

                    res += '

  收盘 : ' + params[i].value[1] + '  最低 : ' + params[i].value[2];

                }

                else {
   

                    res += '

' + params[i].seriesName;

                    res += ' : ' + params[i].value;

                }

            }

            return res;

        }

    },

    legend: {
   

        data:['上证指数','成交金额(万)']  //图中的两个显示数据
    },

    toolbox: {                         //工具箱
        show : true,                       //显示
        backgroundColor: 'yellow',         //工具箱的背景颜色      
        feature : {                      //启用功能，工具箱自定义功能回调处理
            mark : {
   show: true},        //辅助线开关 总共三个开关
            dataZoom : {
   show: true},      //框选区域缩放开关 两个开关