从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. 迭代子模式（Iterator）

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

  2. 51nod 1058 N的阶乘的长度 位数公式

    1058 N的阶乘的长度基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3.Input输入N( ...

  3. CCF-201512-3-画图

    问题描述 试题编号: 201512-3 试题名称: 画图 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 用 ASCII 字符来画图是一件有趣的事情,并形成了一门被称为 ASC ...

  4. Nodejs的运行原理-科普篇

    前言 Nodejs目前处境稍显尴尬,很多语言都已经拥有异步非阻塞的能力.阿里的思路是比较合适的,但是必须要注意,绝对不能让node做太多的业务逻辑,他只适合接收生成好的数据,然后或渲染后,或直接发送到 ...

  5. 初识java这个小姑娘（一）

    忽然想起这样一个场景:那时我还是小学三年级的一个小学生,上课的铃声响起,文艺委员起头,大家开始胡乱的开始唱歌,"让我们荡起双桨,小船儿推开波浪",歌声在一片稚气中慢慢停止.我们的语 ...

  6. linux crontab yum安装

    crontab工具来做计划任务,定时任务,执行某个脚本等等 1.检查是否已安装crontab # crontab -bash: crontab: command not found 执行 cronta ...

  7. PHP-学习之路1

    相信入职快有5个月了,目前项目做过HIS,zySystem,ComStoreSystem当然今天不是来介绍的,后期直到第四个月后APP护身宝经理拍板今后也就是明年正式交于我们团队接手与扩展,运维.虽然 ...

  8. C++、Objective-C 混合编程

    在XCODE中想使用C++代码,你须要把文件的扩展名从.m改成.mm.这样才会启动g++编译器. 我们来看个測试代码: [java] view plaincopy class TestC { priv ...

  9. POJ 2127 最长公共上升子序列

    动态规划法: #include <iostream> #include <cstdio> #include <fstream> #include <algor ...

  10. 2015级C++第4周项目 函数

    [项目1-求最大公约数] 參考解答 (1)输入两个数.并求出其最大公约数 #include <iostream> using namespace std; //自己定义函数的原型(即函数声 ...