从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. C++杂分析

    class word{ public: word(){cout<<"word constructure \n";} word(int i){cout<<&q ...

  2. Centos7.0 下挂载磁盘

    参考:

  3. 实践作业2：黑盒测试实践——在被测系统上录制脚本 Day 5

    1.处理了学生信息管理系统运行的小细节 2.总结了katalon的使用流程如下 a.在Katalon Studio中创建一个自动化测试项目. b.创建一个测试案例,用来写入所有必要的测试步骤 c.编写 ...

  4. HDU 5504 GT and sequence 模拟

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5504 思路:模拟 代码: #include<stdio.h>//------杭电5504 ...

  5. HiveSchemaTool-Parsing failed. Reason- Unrecognized option- -dbType mysql

    版本: Hive2.1 在linux上部署Hive的时候,初始化元数据的时候,出现HiveSchemaTool:Parsing failed. Reason: Unrecognized option: ...

  6. javascript设计模式——装饰者模式

    前面的话 在程序开发中,许多时候都并不希望某个类天生就非常庞大,一次性包含许多职责.那么可以使用装饰者模式.装饰者模式可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象.本文将 ...

  7. TCP头部分析与确认号的理解

    1.TCP的特点: 基于字节流面向连接可靠传输缓冲传输全双工流量控制 2.头部格式和说明 图源百度.如下图示,就是TCP包的头部结构.可以看到这个头部最少有4x5=20个字节. 另外还需要理解TCP协 ...

  8. 对datatable进行简单的操作

    筛选出datatable中c_level=1的数据 dataRow[] rows = dt.Select("c_level=0"); 克隆表dt的结构到表dt,并将dt的数据复制到 ...

  9. JavaSE&&JavaEE&&JavaME的区别【Java中常用的包结构】

    一.javaEEJavaSEJavaME用的同一个jar包吗? javaEE JavaSE javaME 用的JDK是同一个,开发j2SE工程的话只要有JDK就可以了,开发J2EE工程和J2ME工程除 ...

  10. Jquery对话框基本配置

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } p.p2 { margin: 0.0px ...