问题

最近遇到一个问题就是如何在页面上用图表显示数据, 类似大数据可视化平台. 不过在业务需求中不需要显示这么多. 不过有个js组件—“ECharts”, 可以用来可视化数据, 是一个很好的工具.
官网: https://www.echartsjs.com/

需求

以下是我需要的一些需求:

  1. 需要显示多条曲线
  2. 需要显示两个Y轴
  3. 区间显示
  4. 鼠标悬浮时显示f(x)的值

会在代码里解释, 比较方便

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// 数据准备
// data1 和 data2 是预准备的数据,
// data1: 成交量, 单位是元
// data2: 成交利润, 单位是元
var data1 = [
      [
        "2014-11-13",
        65
      ],
      [
        "2014-11-14",
        77
      ],
      [
        "2014-11-15",
        143
      ]
    ];
var data2 = [
      [
        "2014-11-13",
        34
      ],
      [
        "2014-11-14",
        23
      ],
      [
        "2014-11-15",
        55
      ]
    ];
option = {
      tooltip: {                  //鼠标悬停提示内容
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'cross'           // 十字线显示
        }
      },
      legend: {
        y: '20px',
        data: ['今日成交量', '今日理论利润'],
        selectedMode: false,
      },
      toolbox: {
        left: 'center',
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: {},
          restore: {},
          saveAsImage: {}
        }
      },
      dataZoom: [{
        startValue: '1900-01-01'
      }, {
        type: 'inside'
      }],
      xAxis: {
        data: data2.map(function (item) {
          return item[0];
        }),
        silent: false,
        splitLine: {
          show: false
        }
      },
      yAxis: [
        {
          name: '成交量(元)',
          nameLocation: 'end',
          type: 'value'
        },
        {
          name: '理论利润(元)',
          nameLocation: 'end',
          type: 'value'
        }
      ],
      // 两条曲线的数据
      series: [{
        name: '今日成交量',
        // 平滑曲线
        smooth: true,
        // 显示为line, 也可以是柱形图, 如bar
        type: 'line',
        // 显示data1中的数组中, 元素子数组index为1的数据
        data: data1.map(function (item) {
          return item[1];
        })
      }, {
        name: '今日理论利润',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        data: data2.map(function (item) {
          return item[1];
        })
      }],
      // 页面上离两边的距离
      grid: {
        left: 50,
        right: 50
      }
    }

以上是在ECharts官网中的调试代码, 如果真需要在js中呈现, 需要初始化echarts, 示例代码如下:

1
2
3
4
// 获取id为main1的DOM对象引用, 并在该对象上初始化图表
var myChart = echarts.init(document.getElementById('main1'));
// 图表设置option
myChart.setOption(option);

为了调试方便, 可以在ECharts官网上先调试图表的渲染是否合适, 随意找一个模版页面, 然后调试,如: https://www.echartsjs.com/examples/zh/editor.html?c=line-aqi

  • 调试页面:

展示

按照上面的option设置, 展示如下:

基本实现了功能

总结

  1. 图表的展示的调试, 可以在ECharts的官网上调试.
  2. 该图表目前只是静态页面, 如果要显示后台数据, 则需要获取后台数据进行展示.