echarts基本用法：

devexpress chartcontrol 多个折线图 增加单位 折线图增加多个系列_html

一、引入echarts插件

将下载好的echarts放置到自己项目的js文件夹中，在html中引入文件

<script src="./js/jquery-3.1.1.js"></script>

<script src="./js/echarts.min.js"></script>

简单的html如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>多系列折线图</title>
  </head>
  <style type="text/css">
    *{
      padding: 0;
      margin:0 auto;
    }
    .wrapper{
      width: 1100px;
      height: auto;
      background: white;
    }
    #container{
      width: 960px;
      height:500px;
      margin-top:5%;
      /* background:red; */
    }
  </style>
  <body>
    <div class="wrapper">
      <div id="container"> </div>
    </div>
  </body>

  <script type = "text/javascript" src="./js/jquery.js"></script>
  <script type = "text/javascript" src="./js/echarts.min.js"></script>
  <script type = "text/javascript">
  $(document).ready(function(){
    
  }
  </script>
</html>

二、实例化echarts对象

$(document).ready(function(){
    //实例化echarts对象
    var myEcharts = echarts.init(document.getElementById("container"));
    //自定义图表配置选项
    var option = {
      

    };
    //echarts对象绑定配置选项
    myEcharts.setOption(option);
  });

三、设置图表配置选项option

1、绘制网格

grid用法可以参考博客：

var option = {
      //绘制网格
      grid:{
        x:'15%',
        y:'15%'
      }
      
    };

2、绘制x、y轴（写在option对象中，下列步骤同此处）

xAxis:{
            //是否显示x轴
            show:true,
            //类型：类目轴
            type:'category',
            //坐标轴刻度设置
            axisTick:{
                //设置刻度线与标签对齐
                alignWithLabel:true
                },
            axisLine:{
                show:true,
                lineStyle:{
                    //轴线颜色
                    color: '#92adce',
                    //线型
                    type:'solid'
                    }
                },
            data:['01','02','03','04','05','06']
            },
        yAxis:{
            type:'value',
            //是否显示y轴
            show:true,
            axisLine:{
                show:true,
                lineStyle:{
                    //轴线颜色
                    color: '#92adce',
                    //线型
                    type:'solid'
                    }
                }
            },

devexpress chartcontrol 多个折线图 增加单位 折线图增加多个系列_顺时针_02

3、设置系列

//系列列表
        series:[
            {
                //系列名称
                name:'测试系列1',
                //类型：折线图
                type:'line',
                smooth:true,
                //每个数据的标记图形：三角形
                symbol:'triangle',
                //标记图形的大小
                symbolSize:10,
                //标记图形的旋转角度，负数为顺时针旋转：顺时针旋转45度
                symbolRotate:-45,
                //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
                stack:'test',
                //在标记图形上显示对应数值
                label:{
                    normal:{
                        //是否显示
                        show:true,
                        //显示位置：在标记图形的上方
                        position:'top',
                        //文本颜色：黑色，不设置默认为系列色
                        color:'black'
                        }
                    },
                //标记图形的样式
                itemStyle:{
                    normal:{
                        //标记图形的颜色
                        color: 'blue',
                        //标记图形描边颜色
                        borderColor:'rgba(153,51,204,0.27)',
                        //标记图形的描边线宽
                        borderWidth:10,
                        //阴影区域颜色
                        shadowColor:'#fb0000e0',
                        //阴影大小
                        shadowBlur:5,
                        //阴影X轴偏移
                        shadowOffsetX:4,
                        //阴影Y轴偏移
                        shadowOffsetY:4
                        }
                    },
                data: [14,16,19,22,25,30]
                },
            {
                //系列名称
                name:'测试系列2',
                //类型：折线图
                type:'line',
                smooth:true,
                //每个数据的标记图形：三角形
                symbol:'triangle',
                //标记图形的大小
                symbolSize:10,
                //标记图形的旋转角度，负数为顺时针旋转：顺时针旋转45度
                symbolRotate:-45,
                //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
                stack:'test',
                //在标记图形上显示对应数值
                label:{
                    normal:{
                        //是否显示
                        show:true,
                        //显示位置：在标记图形的上方
                        position:'top',
                        //文本颜色：黑色，不设置默认为系列色
                        color:'black'
                        }
                    },
                //标记图形的样式
                itemStyle:{
                    normal:{
                        //标记图形的颜色
                        color: 'blue',
                        //标记图形描边颜色
                        borderColor:'rgba(153,51,204,0.27)',
                        //标记图形的描边线宽
                        borderWidth:10,
                        //阴影区域颜色
                        shadowColor:'#fb0000e0',
                        //阴影大小
                        shadowBlur:5,
                        //阴影X轴偏移
                        shadowOffsetX:4,
                        //阴影Y轴偏移
                        shadowOffsetY:4
                        }                
                    },
                data: [14,16,19,22,25,30]
                }
                
        ],

devexpress chartcontrol 多个折线图 增加单位 折线图增加多个系列_顺时针_03

4、设置图例组件：展示不同系列的标记，颜色和名字

//图例组件：
        legend:{
            data:['测试系列1','测试系列2'],
            //统一设置系列样式
            textStyle:{
                fontSize:'12',
                color:'green'
                },
                //系列之间的间距
                itemGap:50,
                //系列标记图形的宽高
                itemWidth:15,
                itemHeight:15
            },

devexpress chartcontrol 多个折线图 增加单位 折线图增加多个系列_html_04

5、添加提示框组件tooltip

//提示框组件
        tooltip:{
            //触发类型：坐标轴触发
            trigger:'axis'
            }

devexpress chartcontrol 多个折线图 增加单位 折线图增加多个系列_顺时针_05

6、完整代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>多系列折线图</title>
  </head>
  <style type="text/css">
    *{
      padding: 0;
      margin:0 auto;
    }
    .wrapper{
      width: 1100px;
      height: auto;
      background: white;
    }
    #container{
      width: 960px;
      height:500px;
      margin-top:5%;
      /* background:red; */
    }
  </style>
  <body>
    <div class="wrapper">
      <div id="container"> </div>
    </div>
  </body>

  <script type = "text/javascript" src="./js/jquery.js"></script>
  <script type = "text/javascript" src="./js/echarts.min.js"></script>
  <script type = "text/javascript">
  $(document).ready(function(){
    //实例化echarts对象
    var myEcharts = echarts.init(document.getElementById("container"));
    //自定义图表配置选项
    var option = {
      //绘制网格
      grid:{
        x:'15%',
        y:'15%'
      }, 
      //提示框组件
      tooltip:{
            //触发类型：坐标轴触发
            trigger:'axis'
            },
      xAxis:{
            //是否显示x轴
            show:true,
            //类型：类目轴
            type:'category',
            //坐标轴刻度设置
            axisTick:{
                //设置刻度线与标签对齐
                alignWithLabel:true
                },
            axisLine:{
                show:true,
                lineStyle:{
                    //轴线颜色
                    color: '#92adce',
                    //线型
                    type:'solid'
                    }
                },
            data:['01','02','03','04','05','06']
            },
        yAxis:{
            type:'value',
            //是否显示y轴
            show:true,
            axisLine:{
                show:true,
                lineStyle:{
                    //轴线颜色
                    color: '#92adce',
                    //线型
                    type:'solid'
                    }
                }
            },
    //系列列表
    series:[
            {
                //系列名称
                name:'测试系列1',
                //类型：折线图
                type:'line',
                smooth:true,
                //每个数据的标记图形：三角形
                symbol:'triangle',
                //标记图形的大小
                symbolSize:10,
                //标记图形的旋转角度，负数为顺时针旋转：顺时针旋转45度
                symbolRotate:-45,
                //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
                stack:'test',
                //在标记图形上显示对应数值
                label:{
                    normal:{
                        //是否显示
                        show:true,
                        //显示位置：在标记图形的上方
                        position:'top',
                        //文本颜色：黑色，不设置默认为系列色
                        color:'black'
                        }
                    },
                //标记图形的样式
                itemStyle:{
                    normal:{
                        //标记图形的颜色
                        color: 'blue',
                        //标记图形描边颜色
                        borderColor:'rgba(153,51,204,0.27)',
                        //标记图形的描边线宽
                        borderWidth:10,
                        //阴影区域颜色
                        shadowColor:'#fb0000e0',
                        //阴影大小
                        shadowBlur:5,
                        //阴影X轴偏移
                        shadowOffsetX:4,
                        //阴影Y轴偏移
                        shadowOffsetY:4
                        }
                    },
                data: [14,16,19,22,25,30]
                },
            {
                //系列名称
                name:'测试系列2',
                //类型：折线图
                type:'line',
                smooth:true,
                //每个数据的标记图形：三角形
                symbol:'triangle',
                //标记图形的大小
                symbolSize:10,
                //标记图形的旋转角度，负数为顺时针旋转：顺时针旋转45度
                symbolRotate:-45,
                //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
                stack:'test',
                //在标记图形上显示对应数值
                label:{
                    normal:{
                        //是否显示
                        show:true,
                        //显示位置：在标记图形的上方
                        position:'top',
                        //文本颜色：黑色，不设置默认为系列色
                        color:'black'
                        }
                    },
                //标记图形的样式
                itemStyle:{
                    normal:{
                        //标记图形的颜色
                        color: 'blue',
                        //标记图形描边颜色
                        borderColor:'rgba(153,51,204,0.27)',
                        //标记图形的描边线宽
                        borderWidth:10,
                        //阴影区域颜色
                        shadowColor:'#fb0000e0',
                        //阴影大小
                        shadowBlur:5,
                        //阴影X轴偏移
                        shadowOffsetX:4,
                        //阴影Y轴偏移
                        shadowOffsetY:4
                        }                
                    },
                data: [14,16,19,22,25,30]
                }
                
        ],
        //图例组件：
        legend:{
            data:['测试系列1','测试系列2'],
            //统一设置系列样式
            textStyle:{
                fontSize:'12',
                color:'green'
                },
                //系列之间的间距
                itemGap:50,
                //系列标记图形的宽高
                itemWidth:15,
                itemHeight:15
            },

    };
    //echarts对象绑定配置选项
    myEcharts.setOption(option);
  });

  </script>
</html>

devexpress chartcontrol 多个折线图 增加单位 折线图增加多个系列_顺时针_06