从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. JavaScript OOP（二）：this关键字以及call、apply、bind

    JavaScript的this关键字非常灵活! this 返回的总是对象:即返回属性或方法"当前"所在的对象 var o1={ name:'apple', age:100, msg ...

  2. nyoj 2 括号配对问题 栈

    nyoj 2 括号配对问题 题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=2 思路: 栈:'(' '['入栈,遇到 ']' ')'出栈 ...

  3. 51Nod 1110 距离之和最小 V3 中位数 思维

    基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 X轴上有N个点,每个点除了包括一个位置数据X[i],还包括一个权值W[i].点P到点P[i]的带权距离 = 实际距离 ...

  4. PHP 面试时常考的文件操作函数

    前两天面试的时候,笔试要求写一些文件操作类函数,什么遍历目录获取文件扩展名之类的,回来后大致总结了一下PHP中一些常见的文件操作函数分享一下. 1.使用递归删除目录及目录下所有文件的方法. funct ...

  5. 用 Label 控制 Service 的位置 - 每天5分钟玩转 Docker 容器技术（106）

    上一节我们讨论了 Service 部署的两种模式:global mode 和 replicated mode.无论采用 global mode 还是 replicated mode,副本运行在哪些节点 ...

  6. MATLAB中最基本函数plot（）的用法

    1二维平面图形 1.1基本图形函数 画出一条正弦曲线和一条余弦曲线 1.1.1绘图参数表 y 黄- 实线. 点< 小于号 m 紫: 点线o 圆s 正方形 c 青-. 点划线x 叉号d 菱形 r  ...

  7. JavaScript实现AOP（面向切面编程）

    什么是AOP? AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计.安全控制.异常处理等.把这些功能抽离出来之后, 再通过" ...

  8. constructor.prototype

    一个很好玩的小问题考大家对js的理解function alert (){}; ________________ // 填空 alert(1); 使1弹出  http://perfectionkills ...

  9. Scheme -- Hierarchical Structures

    Question: produce a deep-reverse procedure that takes a list as argument  and returns as its value t ...

  10. SpringMVC+Mybatis架构中的问题记录

    2014/08/16 记录 今天遇到个问题.折腾了我大约4个小时,好坑啊由于之前没遇到过 我的包是这么分的:com.project名.模块名.service.impl     在spring 配置这个 ...