可视化前端echarts.js

发表于 | 分类于

今天在我哥的项目中发现有一张页面中引用了echarts.js，有点好奇去查了下，原来是前端可视化，觉得很有趣，去查看了官方文档，它的在线制图真的棒

使用

这是官方的一个最简单的例子

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

总共分为3段代码

  1. 初始化echarts实例
  2. 具体数据展示，展示模型选择
  3. 显示模型

具体数据展示

我们以折线图为例

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
108
109
110
111
112
113
114
option = {
	<!--表名-->
    title: {
        text: '堆叠区域图'
    },
    <!--提示框组件-->
    tooltip : {
    	<!--触发类型-->
    	<!--'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
			 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
			 'none'什么都不触发。-->
        trigger: 'axis',
        <!--配置坐标轴指示器-->
        axisPointer: {
      <!--type类型:
      		'line' 直线指示器
			'shadow' 阴影指示器
			'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。-->
            type: 'cross',
            <!--坐标轴指示器的文本标签-->
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    <!--图例组件-->
    legend: {
    <!--图例的数据数组，一般标示在外-->
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    <!--工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具-->
    toolbox: {
        feature: {
        	 <!--保存为图片-->
            saveAsImage: {}
        }
    },
    <!--设置图表大小-->
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    <!--x坐标-->
    xAxis : [
        {
        <!--type可选
        	'value' 数值轴，适用于连续数据。(y轴默认)
            'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。(x轴默认)
			'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，
		 	'log' 对数轴。适用于对数数据。-->
            type : 'category',
            <!--坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样，默认为true-->
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    <!--y坐标-->
    yAxis : [
        {
            type : 'value'
        }
    ],
    <!--系列列表-->
    series : [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            <!--数据堆叠-->
            stack: '总量',
            <!--区域填充样式，这里采用的是常规值-->
            areaStyle: {normal: {}},
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            <!--标签设置-->
            label: {
                normal: {
                	<!--数值是否显示-->
                    show: true,
                    <!--显示位置-->
                    position: 'top'
                }
            },
            areaStyle: {normal: {}},
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

图形种类参考

赏个🍗吧
0%