`
zengshaotao
  • 浏览: 779763 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

echart基本

 
阅读更多

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html><html><head><metacharset="utf-8"><!-- 引入 ECharts 文件 --><scriptsrc="echarts.min.js"></script></head></html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><divid="main"style="width:600px;height:400px;"></div></body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html><html><head><metacharset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><scriptsrc="echarts.min.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option ={
            title:{
                text:'ECharts 入门示例'},
            tooltip:{},
            legend:{
                data:['销量']},
            xAxis:{
                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},
            yAxis:{},
            series:[{
                name:'销量',
                type:'bar',
                data:[5,20,36,10,10,20]}]};// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);</script></body></html>

 

 

---一些基本配置：

xAxis : [

            {

                type : 'category',

//                 name:'额度',

　　　　　　　　//这是设置的false，就不不显示下方的x轴，默认是true的

                show: false,

　　　　　　　　//这里呢，就是每个柱的name了，根据实际情况下就好了，我就先写这三个

                data : ['最多','平均','最少'],

                axisLabel: {

　　　　　　　　　　　　　//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜

//                     rotate: 30,

　　　　　　　　　　　　//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了

                    interval :0

                    }

            }

        ],

        yAxis : [

            {

                type : 'value',

                name:'数量',

　　　　　　　　　　//下面的就很简单了，最小是多少，最大是多少，默认一次增加多少

                 min: 0,

                 max: 30,

                 interval: 6,

　　　　　　　　　　//下面是显示格式化，一般来说还是用的上的

                 axisLabel: {

                     formatter: '{value} 包'

                 }

            }

        ],

        series : [

            {

                name: '数量',

                type: 'bar',

                itemStyle: {

                    normal: {

　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                        color: function(params) {

                            // build a color map as your need.

                            var colorList = [

                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',

                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'

                            ];

                            return colorList[params.dataIndex]

                        },

　　　　　　　　　　　　　　//以下为是否显示，显示位置和显示格式的设置了

                        label: {

                            show: true,

                            position: 'top',

//                             formatter: '{c}'

                            formatter: '{b}\n{c}'

                        }

                    }

                },

　　　　　　　　　　//设置柱的宽度，要是数据太少，柱子太宽不美观~

　　　　　　　　　　barWidth:70,

                data: [28,15,9,4,7,8,23,11,17]

            }

        ]

 

给每个数据项配置样式：

只需要在series里面给data数组的每个元素设置itemSytle就可以了

option如下：
option = {
    title : {
        text: '高架排队情况'
    },
    tooltip : {
        trigger: 'axis'
    },
    xAxis : [
        {
            type : 'value',
          axisLabel : {
                formatter: '{value} 米'
            }
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : ['未知','畅通','拥挤','堵塞']
        }
    ],
    series : [
        {
            type:'bar',
          data:[
              {
                value:200,
                itemStyle:{
                  normal:{color:'gray'}
              }
              }, 
              {
                value:300,
                itemStyle:{
                  normal:{color:'green'}
              }
              },
              {
                value:1500,
                itemStyle:{
                  normal:{color:'yellow'}
              }
              },
              {
                value:300,
                itemStyle:{
                  normal:{color:'red'}
              }
              }
            ]
        }
    ]
};
效果如下：
ECharts图为每个数据项配置颜色
分享到：
| ibatis工作原理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Echart在android基本使用

    然而，你提到的是"Echart在Android基本使用"，这涉及到将 ECharts 库集成到 Android 应用程序中的过程。在 Android 中使用 ECharts，我们需要通过一些额外的步骤来实现，因为 ECharts 原本是为 Web 开发设计的。 1....

    echart实例echart实例

    本实例将深入探讨ECharts的基本使用和一些高级特性。 1. **ECharts基本使用** ECharts的使用首先需要在HTML文件中引入ECharts的库文件，可以通过CDN链接或者本地下载的方式。引入后，你需要为ECharts准备一个DOM...

    echart 实例

    1. **ECharts的基本结构** ECharts 的使用通常涉及以下几个步骤： - 引入ECharts库：在HTML文件中通过`&lt;script&gt;`标签引入ECharts的JS文件。 - 准备容器：创建一个用于显示图表的`div`元素，并设置好宽高。 - ...

    百度echart地图完成版

    这意味着用户可以放心使用，不必担心基本功能的缺失或错误。 标签“echar”、“地图”和“百度echart”进一步明确了讨论的主题。EChar是ECharts的缩写，它是本话题的核心，而“地图”则特别指出了ECharts在地图可视...

    C# MVC 封装百度的EChart完整例子

    类EChartJson包含了绘制图形的几种基本要素，大家可以根据需要扩展EChart的更多图表属性，当然这个需要各位多了解百度EChart图表的各种属性描述。方法getJsonData()负责在后台为EChartJson的实例初始化数据，并返回...

    Echart数据动态更新

    首先，了解ECharts的基本用法是至关重要的。ECharts图表的创建通常包含以下步骤： 1. **引入ECharts库**：在HTML文件中，你需要通过`&lt;script&gt;`标签引入ECharts的JS文件，例如`&lt;script src="echarts.min.js"&gt;&lt;/...

    基于EChart实现的气象风速风向要素图表例子

    实现这样的图表，首先需要在HTML中引入ECharts的库文件，然后在JavaScript中初始化ECharts实例，配置图表的基本属性，如容器ID、宽高、标题等。接着，定义`option`对象，其中包括`xAxis`（X轴配置）、`yAxis`（Y轴...

    echart全国省市JSON

    **标题解析：** "echart全国省市JSON" 这个标题揭示了我们即将讨论的核心内容。ECharts 是一个由百度开发的开源 ...开发者需要理解ECharts的基本用法、JSON数据的结构以及如何将两者结合实现数据可视化的具体步骤。

    Hbase结合echart.js实例主要代码

    首先，我们需要了解Hbase的基本操作。Hbase是NoSQL数据库的一种，它使用行键、列族、列限定符和时间戳来组织数据。在Hbase中，数据被存储在表中，表由行和列组成。行由行键标识，列由列族和列限定符定义。时间戳用于...

    echart百度地图word.js

    1. **地图加载**：该脚本可能会实现加载百度地图的API，创建地图实例，并设置地图的基本属性，如中心点、缩放级别等。 2. **标记点渲染**：可能包含了在地图上添加标记点的代码，这些标记点可以表示特定的地理位置或...

    Echart简单入门.zip

    本资料"**Echart简单入门.zip**"是针对初学者设计的，旨在帮助用户快速掌握ECharts的基本用法和实现简单的数据可视化。 在ECharts的使用过程中，首先需要引入相关的JavaScript文件。ECharts的核心库是`echarts.min....

    echart地图片与代码例子

    在"echart地图片与代码例子"这个主题中，我们可以深入探讨ECharts如何创建地图图表和其他基本图表，以及如何结合HTML页面进行展示。 首先，ECharts的地图图表功能强大，它包含了中国各省份、城市甚至区县级别的地图...

    echart拓扑图单节点拖拽互不影响demo

    首先，让我们了解ECharts中拓扑图的基本概念。拓扑图是ECharts提供的图形类型之一，它允许用户展示具有层次结构的数据，如网络设备分布、系统架构等。在拓扑图中，每个节点表示一个实体，而连线则表示它们之间的关系...

    echart实现3D柱状图效果

    在本案例中，我们将探讨如何利用 ECharts 实现3D柱状图效果，特别是在使用 echart.gl.js 扩展库时的具体步骤和技术要点。 1. **ECharts与ECharts.gl介绍** ECharts 是百度开发的一款开源的、轻量级的数据可视化...

    百度Echart开源图表demo

    **百度Echarts开源图表demo**是中国著名的互联网公司百度推出的一款强大的数据可视化库...开发者可以通过这些示例学习Echarts的基本用法，结合HTML、CSS和JavaScript，为网站或应用程序构建出吸引眼球的数据展示模块。

    echart3 地图散点图专用 省市区县经纬度信息json

    echart3 地图散点图专用 省市区县经纬度信息json，缺少部分区县，不全，但是基本够用。可以配合我的其他的echart的资源一同使用，自己收集的，自己项目中在用。

    Echart省市区地图下钻

    在【标题】"Echart省市区地图下钻"中，我们讨论的是如何利用ECharts实现从省级地图向下逐级细化到地级市、区县的地图下钻功能。这是一种常见的地理数据分析展示方式，能够帮助用户更直观地理解和探索地理分布数据。 ...

    Echart生成图片插入到word

    在描述中提到的“Echart生成图片插入到word中”这一话题，我们将探讨如何利用ECharts生成的图表图片并将其集成到Word文档中。 首先，ECharts可以通过`chart.exporting()`方法生成SVG或PNG格式的图片。以下是生成...

    echart_EChart代码_vue雷达图_源码

    以下是一个基本的雷达图组件示例： ```html ; height: 400px;"&gt; export default { data() { return { options: { tooltip: { trigger: 'axis' }, radar: { indicator: [ { name: '销售', max: 6500 }...

Magicbox
Global site tag (gtag.js) - Google Analytics