echarts的使用和例子传送门

1.安装echarts

npm install echarts --save

这里配置好了，直接输入

npm install //下载插件

npm start //运行

npm run build //打包压缩

例子

html，div必须设置宽高

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	<title>cjw</title>

	<style>

		.item{

			width:300px;height:200px;float:left;

		}

	</style>

</head>

<body>

	<div id="main" class="item"></div>

	<div id="main1" class="item"></div>

	<script src="./dist/vendor.bundle.js"></script>

	<script src="./dist/app.js"></script>

</body>

</html>

js

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

myChart.showLoading();

// 绘制图表

myChart.setOption({

    title: { text: 'ECharts 入门示例' },//标题

    tooltip: {},//鼠标移动上去提示

    xAxis: {

        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

    },

    yAxis: {},

    series: [{

        name: '销量',

        type: 'bar',

        data: [5, 20, 36, 10, 10, 20]

    }]

});

通用样式(itemStyle)ECharts 中有一些通用的样式，诸如阴影、

透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的

itemStyle 里设置。例如阴影的样式可以通过下面几个配置项设置：

阴影的配置

itemStyle: {

    normal: {

        // 阴影的大小

        shadowBlur: 200,

        // 阴影水平方向上的偏移

        shadowOffsetX: 0,

        // 阴影垂直方向上的偏移

        shadowOffsetY: 0,

        // 阴影颜色

        shadowColor: 'rgba(0, 0, 0, 0.5)'

    }

}

深色背景和浅色标签

//背景色是全局的，所以直接在 option 下设置 backgroundColor

setOption({

    backgroundColor: '#2c343c'

})

//文本的样式可以设置全局的 textStyle。

setOption({

    textStyle: {

        color: 'rgba(255, 255, 255, 0.3)'

    }

})

loading 动画配合后台请求数据使用

myChart.showLoading();

$.get('data.json').done(function (data) {

    myChart.hideLoading();

    myChart.setOption(...);

});

图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline

github源代码

echarts3.0使用总结的更多相关文章

  1. asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送

    先看看效果: 感谢QQ群18668853的群主,无私的公开课,全是干货,当初学的时候,群主用的是jquery.flot做图表,我这里改成百度的Echarts3.0,这算是自己的修改吧,喜欢的可以去下载 ...

  2. Echarts3.0 引入百度地图(转载)

    转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...

  3. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  4. vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图，折线图)

    一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使 ...

  5. echarts3.0 仪表盘实例更改完成占用率实例

    需要完成的项目效果 官方实例效果 基本思路: 首先引入jquery和echarts3.0库. 需要两个仪表盘,一个仪表盘是纯色灰色,在底部.startAngle 和endAngle永远是最大值,默认为 ...

  6. echarts3.0之关系图详解

    近期需要使用echarts关系图,当我打开echarts3.0官方demo后发现,对于新手而言,直接看懂有点儿难度,固写这样一篇文章让自己加深记忆,也便新手迅速上手.话不多说,开整生气! echart ...

  7. ECharts3.0饼状图使用问题总结

    前提:本人使用的是IE9浏览器 1.IE中无法显示,谷歌却显示正常的问题: 1)情况一 var myChart_cols<%=i%> = echarts.init(document.get ...

  8. echarts3.0 本期累计堆叠

    @{ ViewBag.Title = "barlj"; } <h2>barlj</h2> <div id="main" style ...

  9. echarts3.0版本断点连线的处理

      项目应用到echarts图表组件.官网的demo中出现空数据会断开.经过跟踪调试.修改echarts.js以下代码即可实现断点连线功能(需要将空数据处理成'-'.这样才能均值): for (var ...

随机推荐

  1. vue实现标签云效果

    闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...

  2. web移动端布局方式整理

    写H5页面一直写的有点随意,只是保证了页面在各个屏幕下显示良好,却没有保证到在各个屏幕下是等比例放大或者缩小.这些天在写一些页面,试着看看能不能写出等比例放大缩小的页面,发现不容易啊,在网上找了一些文 ...

  3. [Tool] Git 使用 与 Git Flow

    目录 简介 Git 命令 Git Flow 简介 Git是目前世界上最先进的分布式版本控制系统(没有之一). Linus花了两周时间自己用C写了一个分布式版本控制系统,这就是Git!一个月之内,Lin ...

  4. 国内APM企业的现状

    19世纪美国西部掘金热大起,大家听闻有人挖到了金子一夜暴富,于是蜂拥而上,但是很多人失望而归,最后居然是卖铲子的人赚到了钱. APM在互联网+时代表示应用性能管理,就是掘金万亿互联网市场的“铲子”,主 ...

  5. LaTeX初识 新手入门 Texlive和Texmaker学习

    转载自:http://blog.sina.com.cn/s/blog_90444ed201016iq6.html http://blog.csdn.net/zb1165048017/article/d ...

  6. Python将数据插入到数据库时遇到单引号插入错误的问题

    这才是真正的解决方法,真不知道有些人连试都没试过就乱转载 比如你要插入一个字符串,是一个变量 如:str = "I'am a handsom boy" 由于这个字符串包含',插入数 ...

  7. Java 9 揭秘（7. 创建自定义运行时映像）

    Tips 做一个终身学习的人. 在第一章节中,主要介绍以下内容: 什么是自定义运行时映像和JIMAGE格式 如何使用jlink工具创建自定义的运行时映像 如何指定命令名称来运行存储在自定义映像中的应用 ...

  8. Openfire开发广播服务接口，支持离线广播消息

    Openfire开发广播服务接口,支持离线广播消息 概要 最近公司要求做一个web端向所有移动端发送公告,所以考虑到即时性就用openfire做服务.不过为了减轻web端的工作量,我们开发一个简单的插 ...

  9. Socket实现-Socket I/O

    Socket层的核心是两个函数:sosend()和soreceive().这两个函数负责处理所有Socket层和协议层之间的I/O操作. select()系统调用的作用是监控文件描述符的状态.一般用于 ...

  10. 详细介绍Java虚拟机（JVM）

    1. JVM生命周期 启动.启动一个Java程序时,一个JVM实例就产生了,任何一个拥有public static void main(String[] args)函数的class都可以作为JVM实例 ...