ehcarts折线图

创建时间：2017-10-12 投稿人：浏览次数：500

一 . 问题汇总：折线图问题与解决

折线图中的多条折线，怎么设置？
怎么设置echarts的背景颜色？
怎么设置X轴，Y轴的坐标线的颜色？
怎么将X轴的数据倾斜显示？
怎么让你的折线有弧度？

初始样式如图，以及要解决的问题：

我的博客地址 http://blog.zhouminghang.xyz

二. 前提准备条件

要使用echarts，首先要在你的页面中引入echarts.js；
要在.html文件中，设置一个容器，并给它设置宽高属性；
- 再次声明，必须给容器设置宽高，它是用来给画布提供一个空间，否则是不会显示的；
最后就是关于echarts的配置；
- 可以单独写一个js文件，然后引进来；
- 也可以直接在index.html中写一个<script> // 相关代码 </script>

index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--第一步： 引入 ECharts 文件 -->
        <script src="js/node_modules/echarts/dist/echarts.min.js"></script>
    </head>
    <body>
          <!--第二步：指定一个容器用来存放echarts，也就是一个设置宽高属性的 DOM节点 -->
    <div id="box" style="width: 600px;height:400px;"></div>
    </body>
</html>

我这里图方便，js就直接写在html文件里了

<script>
// 获取到这个DOM节点，然后初始化

    var myChart = echarts.init(document.getElementById("box"));

// option 里面的内容基本涵盖你要画的图表的所有内容
    var option = {
        // 定义样式和数据
    }

// 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option);
</script>

注意：

你在写myChart.setOption(option);这行代码的时候一定不要忘了这个myChart是要和你上面定义的var 变量名对应起来，比如var myChart = echarts.init(document.getElementById("box"));

举个栗子吧：

如果你定义的变量名是oMyChart,那你就这样写：

var oMyChart = echarts.init(document.getElementById("box"));
var option = {
            // 定义样式和数据
            }
oMyChart.setOption(option);

关键内容都在option中

         var option = {
                        backgroundColor: "#FBFBFB",
                        tooltip : {
                            trigger: "axis"
                        },
                        legend: {
                            data:["充值","消费"]
                        },

                        calculable : true,


                        xAxis : [
                            {
                                axisLabel:{
                                    rotate: 30,
                                    interval:0
                                },
                                axisLine:{
                                  lineStyle :{
                                      color: "#CECECE"
                                  }
                                },
                                type : "category",
                                boundaryGap : false,
                                data : function (){
                                    var list = [];
                                    for (var i = 10; i <= 18; i++) {
                                        if(i<= 12){
                                            list.push("2016-"+i + "-01");
                                        }else{
                                            list.push("2017-"+(i-12) + "-01");
                                        }
                                    }
                                    return list;
                                }()
                            }
                        ],
                        yAxis : [
                            {

                                type : "value",
                                axisLine:{
                                    lineStyle :{
                                        color: "#CECECE"
                                    }
                                }
                            }
                        ],
                        series : [
                            {
                                name:"充值",
                                type:"line",
                                symbol:"none",
                                smooth: 0.2,
                                color:["#66AEDE"],
                                data:[800, 300, 500, 800, 300, 600,500,600]
                            },
                            {
                                name:"消费",
                                type:"line",
                                symbol:"none",
                                smooth: 0.2,
                                color:["#90EC7D"],
                                data:[600, 300, 400, 200, 300, 300,200,400]
                            }
                        ]
                    };

三. 问题解决

3.1 怎么给echarts的容器添加背景色？

这是我碰到的第一个坑，你是不是和我一样，直接给容器添加了background-color属性，但是你会发现并没有什么卵用

代码如下：

<div id="box" style="width: 600px; height:400px; background-color: pink;"></div>

效果如下：

我的博客地址 http://blog.zhouminghang.xyz

你会发现背景色应用不上，这里我自己认为，echarts画折线图什么的，就相当于是使用canvas在画图，它在画图前已经将画布初始化了，所以给容器添加背景色是不行的，那么怎么办呢？

解决办法：

要在optionecharts图的配置中进行配置，添加background-color属性；
为了区别，看看到底是给容器添加的背景色应用上了，还是option中的背景色应用上了；
我们设置容器背景为粉色，设置echarts中的option为#FBFBFB；

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/node_modules/echarts/dist/echarts.min.js"></script>
</head>

<body>
    <div id="box" style="width: 1000px; height:500px; background-color: pink;"></div>
    <script>
    // 获取到这个DOM节点，然后初始化

    var myChart = echarts.init(document.getElementById("box"));

    // option 里面的内容基本涵盖你要画的图表的所有内容
    // 定义样式和数据
    var option = {
        // 给echarts图设置背景色
        backgroundColor: "#FBFBFB",                  // -----------> // 给echarts图设置背景色   
        tooltip: {
            trigger: "axis"
        },
        legend: {
            data: ["充值", "消费"]
        },

        calculable: true,


        xAxis: [{
            type: "category",
            // boundaryGap: false,
            data: function() {
                var list = [];
                for (var i = 10; i <= 18; i++) {
                    if (i <= 12) {
                        list.push("2016-" + i + "-01");
                    } else {
                        list.push("2017-" + (i - 12) + "-01");
                    }
                }
                return list;
            }()
        }],
        yAxis: [{

            type: "value"
        }],
        series: [{
            name: "充值",
            type: "line",
            data: [800, 300, 500, 800, 300, 600, 500, 600]
        }, {
            name: "消费",
            type: "line",
            data: [600, 300, 400, 200, 300, 300, 200, 400]
        }]
    };


    // 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option);
    </script>
</body>

</html>

区别以及效果：

在这里我同时给容器添加背景色，在echarts配置中设置背景色，一会我们看看是哪个背景色作用上了，代码如下：

我的博客地址 http://blog.zhouminghang.xyz

很显然，配置里的背景色应用上了，所以直接给容器设置背景是行不通的，效果如图所示：

我的博客地址 http://blog.zhouminghang.xyz

3.2 怎么设置多条折线以及每条折线的颜色

在series中以数组形式添加多组数据即可；
在每条折线里面直接添加color: ["相应的颜色"]

代码如下：

我的博客地址 http://blog.zhouminghang.xyz

效果图如下：

我的博客地址 http://blog.zhouminghang.xyz

3.3 去掉小圆点

设置symbol: "none"

代码对比：

我的博客地址 http://blog.zhouminghang.xyz

效果对比：

我的博客地址 http://blog.zhouminghang.xyz

3.4 设置折线图的弧度

设置smooth属性
属性值在0-1之间

代码对比图：

我的博客地址 http://blog.zhouminghang.xyz

效果对比图：

我的博客地址 http://blog.zhouminghang.xyz

3.5 设置坐标轴的颜色

为了让效果颜色更加明显，就给坐标轴添加比较显眼的颜色，只做个示范用，项目中肯定不会用这么重的颜色，一般使用灰色系的颜色比较淡的

设置X轴颜色为红色
- 在xAxis下添加

axisLine: {
                lineStyle: {
                    color: "red"
                 }
             },

同理设置Y轴

代码：

我的博客地址 http://blog.zhouminghang.xyz

效果图：

我的博客地址 http://blog.zhouminghang.xyz

3.6 怎么让折线图从X轴0刻度开始

设置boundaryGap: false,

代码如下：

我的博客地址 http://blog.zhouminghang.xyz

效果如下：

我的博客地址 http://blog.zhouminghang.xyz

3.7 怎么让X轴的时间这组数据旋转

有时候我们X轴数据比较长又比较多的时候，水平放置肯定成不下，那我们就让它倾斜着放，这样就可以放更多的数据。

好了，废话不多说，看代码：

我的博客地址 http://blog.zhouminghang.xyz

效果如图：

我的博客地址 http://blog.zhouminghang.xyz

四. 突然发现我写的有个小问题，少了一组数据，很尴尬的赶脚

你可以直接在data中添加一组数据
哈哈，我比较懒，就直接修改那个判断条件，将i<=18改成i<18;

完整的代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/node_modules/echarts/dist/echarts.min.js"></script>
</head>

<body>
    <div id="box" style="width: 1000px; height:500px; background-color: pink;"></div>
    <script>
    // 获取到这个DOM节点，然后初始化

    var myChart = echarts.init(document.getElementById("box"));

    // option 里面的内容基本涵盖你要画的图表的所有内容
    var option = {
        // 定义样式和数据
        backgroundColor: "#FBFBFB",
        tooltip: {
            trigger: "axis"
        },
        legend: {
            data: ["充值", "消费"]
        },

        calculable: true,


        xAxis: [{
            axisLabel: {
                rotate: 30,
                interval: 0
            },
            axisLine: {
                lineStyle: {
                    color: "red"
                }
            },
            type: "category",
            boundaryGap: false,
            data: function() {
                var list = [];
                for (var i = 10; i < 18; i++) {
                    if (i <= 12) {
                        list.push("2016-" + i + "-01");
                    } else {
                        list.push("2017-" + (i - 12) + "-01");
                    }
                }
                return list;
            }()
        }],
        yAxis: [{

            type: "value",
            axisLine: {
                lineStyle: {
                    color: "#CECECE"
                }
            }
        }],
        series: [{
            name: "充值",
            type: "line",
             symbol: "none",
             smooth: 0.3,
             color: ["#66AEDE"],
            data: [800, 300, 500, 800, 300, 600, 500, 600]
        }, {
            name: "消费",
            type: "line",
             symbol: "none",
             smooth: 0.3,
             color: ["#90EC7D"],
            data: [600, 300, 400, 200, 300, 300, 200, 400]
        }]
    };


    // 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option);
    </script>
</body>

</html>

效果如图：

作者：_信仰zmh
链接：http://www.jianshu.com/p/8cac22daca98
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。