echarts配置方法

发表于   |   分类于   |  

好久没来更新博客~忙死忙死……最近稍微有点空了补更补更~~😊😊

最近在研究echarts，发现网上的配置帖中的配置方法有点过时，所以我也来写一篇，记录下echarts的配置方法。

首先去百度echarts官网下载echarts，解压后找到以下几个文件和文件夹：

1
2
3
4
echarts-2.2.7/build/dist/echarts.js
echarts-2.2.7/build/dist/chart
echarts-2.2.7/doc/example/theme
echarts-2.2.7/doc/asset/js/echartsConfig.js

将这些文件和文件放入一个文件夹作为echarts包（我将其命名为echarts，本文中讲到的echarts就是指这个包），我们新建一个工程，结构如下：

1
2
3
4
demo
   |--demo.html
   |--js
      |--echarts

接下来，重头戏来了，小二，上代码~~ 来了您呐~~
代码预览点这里

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>ECharts-基本线性图及其配置要求</title>
</head>
<body>
    <div id="main" style="height: 400px; width:800px; border-radius: 10px; padding: 10px;">
    </div>
    <script src="./js/echarts/echarts.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" language="javascript">
        require.config({
            paths: {
                 echarts: './js/echarts', //echarts包的路径
             }
         });
        require(
            [
            'echarts',
            'echarts/theme/dark', //需要使用的theme，如果不需要可以省略
            'echarts/chart/line', //需要引入的表格类型
            'echarts/chart/bar' //同上
            ],
        //回调函数
        //渲染ECharts图表
        function (ec,theme) {  //如不使用theme，可以省略theme参数，ec.init也可以省略
            //图表渲染的容器对象
            var chartContainer = document.getElementById("main");
            //加载图表
            var myChart = ec.init(chartContainer,theme);
            option = {
                title: {
                    text: 'echarts-基本线性图',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    y: 'bottom',
                    data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
                },
                toolbox: {
                    show: true,
                    x: 'right',
                    orient: 'vertical',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                }
                ],
                yAxis: [
                {
                    type: 'value'
                }
                ],
                series: [
                {
                    name:'邮件营销',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'直接访问',
                    type:'line',
                    stack: '总量',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'搜索引擎',
                    type:'line',
                    stack: '总量',
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                }
                ]
            };
            myChart.setOption(option);
        });
        $(function(){
            var marginWidth = $('body').width() - $('#main').width();
            var marginLeft = marginWidth / 2;
            $('#main').css('margin-left', marginLeft);
        });
</script>
</body>
</html>

注意，代码中的echarts: './js/echarts'指的是echarts包所在的位置，而['echarts','echarts/theme/dark', 'echarts/chart/line']中的echarts则是指引入包得变量名。在配置echarts中最重要的就是option了，option的中配置项可以查看echarts配置项查找工具。

好啦，今天就讲这么多~~ 下一次我们再来讲echarts点击事件~~ 拜拜，债见~