从echart官网下载js，然后引入jq即可运行。足够简单应用了

关键词：echart控制：图标标题、数据标题、折线图、柱状图切换按钮、恢复刷新图表按钮、保存为图片按钮、坐标系控制、坐标数据、坐标倾斜角度、刻度位置、要显示的标线（平均值、最大值、最高点）、折线颜色、折线点颜色

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

            <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title>折线图</title>

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

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

    </head>

    <body>

        <div id="chart_box" style="width: 100%;height:400px;margin:0 auto;"></div>

    </body>

    <script>

         // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('chart_box'));

        // 指定图表的配置项和数据

        option = {

                title: {

                    text: '图表标题',//图表标题　　　　

                    subtext: '近一周推广数据'//数据标题

                },

                tooltip: {

                    trigger: 'axis'

                },

                legend: {

                    data:['日平均点击量','最高点击量']

                },

                toolbox: {

                    show:true,

                    feature: {

                        dataZoom: {

                            yAxisIndex: 'none'

                        },

                        dataView: {readOnly: false},

                        //magicType: {type: ['line', 'bar']},//折线图、柱状图切换

                        //restore: {},//恢复，即刷新图表

                        //saveAsImage: {}//保存为图片

                    }

                },

                grid:{//直角坐标系控制

                    left:50,//grid 组件离容器左侧的距离

                    top:70,

                    right:40,

                    bottom:50,

                },

                xAxis:  {    //设置横坐标

                    type: 'category',

                    axisLabel: {//横坐标的控制

                        show:true,//是否显示横坐标数据

                        rotate: 30,//坐标的倾斜角度

                        inside:false,//刻度是否朝内

                        margin:8,//标尺与轴线的距离，默认8

                        },

                    boundaryGap: false,

                    data: ['05.02','05.03','05.04','05.05','05.06','05.07','05.08']

                },

                yAxis: {    //设置纵坐标

                    type: 'value',

                    axisLabel: {

                        formatter: '{value}',

                        rotate: 30,//坐标的倾斜角度

                        inside:true,//刻度是否朝内

                    }

                },

                series: [

                    {

                        name:'日平均点击量',

                        type:'line',

                        data:[400, 554, 1580, 1355, 1111, 1644, 1066],

                        markPoint: {

                        },

                        markLine: {

                            data: [

                                {type: 'average', name: '平均值'}

                            ]

                        }

                    },

                    {

                        name:'最高点击量',

                        type:'line',

                        data:[800, 1000, 1700, 1689, 1500, 1900, 2016],

                        markPoint: {

                            data: [

                                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}

                            ]

                        },

                        markLine: {

                            data: [

                                {type: 'average', name: '平均值'},

                                [{

                                    symbol: 'none',

                                    x: '90%',

                                    yAxis: 'max'

                                }, {

                                    symbol: 'circle',

            //                      label: {

            //                          normal: {

            //                              position: 'start',

            //                              formatter: '最大值'

            //                          }

            //                      },

            //                      type: 'max',

            //                      name: '最高点'

                                }]

                            ]

                        },

　　　　　　　　　　　　　　　 itemStyle: {
　　　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　　　color: '#00FF00',//改变折线点的颜色
　　　　　　　　　　　　　　　　　　　　lineStyle: { //改变折线颜色
　　　　　　　　　　　　　　　　　　　　　　color: '#00FF00'
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　},

                    }

                ]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</html>

百度图表插件echart简单应用，简单配置一些要显示的样式及种类的更多相关文章

  1. JavaWeb图表插件的小研究

    背景 近期的一个项目中,对数据的统计分析有非常大的要求,这就要求有一款非常强大的报表.图表插件.因此,组长给分了任务.让我们各自去研究不同的图表插件.用了一两天的时间,对java这块的图表插件做了一个 ...

  2. 百度echart使用心得，百度图表。

    百度echart算是百度针对数据展示做的一个图表插件吧,一般我们使用都不是问题,主要还是对于对动态数据的解析.我这里使用饼状图,和柱状图为例: 首先,我们需要定义一个绘图的容器:(class是我自己定 ...

  3. ionic3引用外部插件--百度地图及echart报表的使用

    前言 ionic3提供的组件已经相当丰富咯,但是事实上有些特殊的需求,比如使用百度地图,或者第三方插件echart报表插件是,就不能用传统的方式去使用第三方插件咯,如何在Ionic3项目中使用第三方J ...

  4. 超简单，webpack配置

    有看过我的博客的童鞋可能有看到我最近有在利用闲暇时间做一个前后台均涵盖的音乐播放器项目,但是呢,我是一个小小的前端,对后台的了解可以说只停留在很初级的阶段,当然了音乐播放器的音乐列表是后台轮循出来的, ...

  5. postman插件的安装以及简单介绍

    1:postman是干什么的? Postman官网上这么介绍的:“Modern software is built on APIs,Postman helps you develop APIs fas ...

  6. 一个简单的零配置命令行HTTP服务器

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  7. 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  8. 简单几步配置gitlab

    简单几步配置gitlab 之前配置gitlab需要很多步骤,要装apache2.ruby.tomcat.mysql等一片东西.有没有更简单的方式呢?现在可以借助bitnami,简化了很多. 可以参考v ...

  9. Spring简单的文件配置

    Spring简单的文件配置 “计应134(实验班) 凌豪” 一.Spring文件配置 spring至关重要的一环就是装配,即配置文件的编写,接下来我按刚才实际过程中一步步简单讲解. 首先,要在web. ...

随机推荐

  1. 如何编写gitignore文件

    原文链接:https://www.cnblogs.com/jingtyu/p/6831772.html 为什么要有.gitignore文件 项目中经常会生成一些Git系统不需要追踪(track)的文件 ...

  2. 迭代子模式（Iterator）

    迭代子模式(Iterator) 顾名思义,迭代器模式就是顺序访问聚集中的对象,一般来说,集合中非常常见,如果对集合类比较熟悉的话,理解本模式会十分轻松.这句话包含两层意思:一是需要遍历的对象,即聚集对 ...

  3. 《Flask Web开发——基于Python的Web应用开发实践》一字一句上机实践（上）

    目录 前言 第1章 安装 第2章 程序的基本结构 第3章 模板 第4章 Web表单 第5章 数据库 第6章 电子邮件 第7章 大型程序的结构   前言 学习Python也有一个半月时间了,学到现在感觉 ...

  4. c# 初识WPF

    WPF,全名是Windows Presentation Foundation,是微软在.net3.0 WinFX中提出的.WPF是对Direct3D的托管封装,它的图形表现依赖于显卡.当然,作为一种更 ...

  5. node基础篇一：node介绍、node http、node event 课堂（持续）

    最近工作一直很忙,没时间更新,谅解,这次准备更新一次node教程,本课堂将持续更新,每周坚持更新一到两章,希望对大家有一些小帮助吧: 一.首先什么是node? 1/Node.js 是一个基于 Chro ...

  6. C++ map multimap

    map multimap map,multimap key-value对容器,也叫字典,map中不能存放key相同的元素,而multimap可以,容器中元素默认按升序排序 map multimap的相 ...

  7. android checkbox 未选中状态 已选中状态 替换成自己的图片

    效果图: 未选中状态: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  8. ms sql一些技巧

    1.SQL:复制数据库某一个表到另一个数据库中 SELECT * INTO 新表 FROM 旧表 (将旧表的结构和数据都复制到新表,不用事先创建新表) SELECT * INTO 新表 FROM 旧表 ...

  9. objective-c 开发最简单的UITableView时数据进不去的问题

    今天在使用UITableView时遇到的问题,我在plist文件配置的数据进不去列表,以下是解决方案 问题原因:plist文件root的type配置错误 如上图所示,博主是使用plist文件作为我的沙 ...

  10. 动态生成表格的每一行的操作按钮如何获取当前行的index

    for(var i=0; i<10; i++) { $("#tableList").append( $("<tr>").append( $(& ...