Echart 使用图表简单示例

简单应用方式:

<div id="main"></div>
引用Echart
<script src="js/echarts.common.min.js"></script>
var myChart = echarts.init(document.getElementById(‘main‘));
     option={

          ...配置项

      }
myChart.setOption(option);

配置项设置:

//两边留白:
boundaryGap:[‘30%‘, ‘30%‘]
//不要刻度线:
axisTick:{
    show:false
},
//设置轴线线宽:
axisLine:{
    lineStyle:{
        width:2
    }
}
//不要网格:
grid:{
    show:false,
}
//Y轴轴线不显示
yAxis : [
    {
        show:false,
    }
//数据结果设置
series : [
    {
        type:‘line‘,
        symbol:‘circle‘,//拐点的形状 实心圆
        symbolSize:24,//拐点的形状的大小
        label:{
            normal:{
                show:true,
                // offset:[0,-10],
                textStyle:{
                    color:"#5181bb",//提示值的字体颜色设置
                }
            }
        },
        itemStyle:{
            normal:{
                color:"#5181bb"
            }
        },
        data:[10, 50, 80, 100, 150, 60],//数据
    }
]

]

  

更多配置参考 :http://echarts.baidu.com/option.html#xAxis.nameGap

时间: 2024-10-29 19:06:31

Echart 使用图表简单示例的相关文章

图表插件--jqplot简单示例及参数说明

最简陋的线形图 第一步:引入必要的CSS.JS文件 [html] view plaincopy <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/> <!-- excanvas.js用于兼容IE浏览器 --> <!--[if lt IE 9]><script language="

AMQP消息队列之RabbitMQ简单示例

前面一篇文章讲了如何快速搭建一个ActiveMQ的示例程序,ActiveMQ是JMS的实现,那这篇文章就再看下另外一种消息队列AMQP的代表实现RabbitMQ的简单示例吧.在具体讲解之前,先通过一个图来概览下: 1.添加Maven依赖 <!-- rabbitmq begin --> <dependency> <groupId>org.springframework.amqp</groupId> <artifactId>spring-rabbit

HMM的维特比算法简单示例

今天读了一位大牛的关于HMM的技术博客,读完之后,写了一个关于维特比算法的简单示例,用scala和java语言混合编写的.现在上传之. package com.txq.hmm import java.utilimport scala.collection._ /** * HMM维特比算法,根据显示状态链条估计隐式链条 * @param states 隐式states * @param observations 显式states * @param start_probability 初始概率向量

spring-servlet.xml简单示例

spring-servlet.xml简单示例 某个项目中的spring-servlet.xml 记下来以后研究用 1 <!-- springMVC简单配置 --> 2 <?xml version="1.0" encoding="UTF-8"?> 3 <beans xmlns="http://www.springframework.org/schema/beans" 4 xmlns:xsi="http://w

关于Ajax实现的简单示例

一.代码示例 关于Ajax的基本概念(包括XMLHttpRequest对象及其相关方法属性)移步这里(w3school中文版)学习了解. <!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>使用Ajax异步加载数据</title> <script type = "text/javasc

【转】bind简单示例

bind简单示例代码 namespace { class placeholder_ {}; placeholder_ __1; } template <typename R, typename T, typename Arg> class simple_bind_t { private: typedef R (T::*F)(Arg); F f_; T* t_; Arg& a_; public: simple_bind_t(F f, T* t, Arg &a) : f_(f),

SQL左连接、右连接和内连接的简单示例

left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录: right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录: inner join(等值连接) 只返回两个表中联结字段相等的行:举例如下: -------------------------------------------- 表A记录如下: aID aNum 1 a20050111 2 a20050112 3 a20050113 4 a20050114 5 a20050115 表B记录

Backbone简单示例

要的资源: <script type="text/javascript" src="../dep/underscore-1.6.0.min.js"></script> <script type="text/javascript" src="../dep/jquery-1.11.1.min.js"></script> <script type="text/javas

动态网站开发技术学习2:VS 2010制作作第一个简单示例网站

制作一个简单示例网站的步骤: 一,启动VS 2010开发环境,选择菜单中的"文件",选择其中的"新建",再选择"网站",会弹出"新建网站"对话框. 二,在"新建网站"的对话框,在"已安装模板"中选择Visual C#,右侧的选择"ASP.NET网站"选项,单击"新建网 站"中的"文件系统",下拉菜单中有"文件系统&qu