echarts的使用和例子传送门

1.安装echarts

  1. npm install echarts --save

这里配置好了，直接输入

  1. npm install //下载插件
  2. npm start //运行
  3. npm run build //打包压缩

例子

html，div必须设置宽高

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. 	<title>cjw</title>
  6. 	<style>
  7. 		.item{
  8. 			width:300px;height:200px;float:left;
  9. 		}
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<div id="main" class="item"></div>
  14. 	<div id="main1" class="item"></div>
  15. 	<script src="./dist/vendor.bundle.js"></script>
  16. 	<script src="./dist/app.js"></script>
  17. </body>
  18. </html>

js

  1. // 基于准备好的dom，初始化echarts实例
  2. var myChart = echarts.init(document.getElementById('main'));
  3. myChart.showLoading();
  4. // 绘制图表
  5. myChart.setOption({
  6.     title: { text: 'ECharts 入门示例' },//标题
  7.     tooltip: {},//鼠标移动上去提示
  8.     xAxis: {
  9.         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  10.     },
  11.     yAxis: {},
  12.     series: [{
  13.         name: '销量',
  14.         type: 'bar',
  15.         data: [5, 20, 36, 10, 10, 20]
  16.     }]
  17. });

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

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

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

阴影的配置

  1. itemStyle: {
  2.     normal: {
  3.         // 阴影的大小
  4.         shadowBlur: 200,
  5.         // 阴影水平方向上的偏移
  6.         shadowOffsetX: 0,
  7.         // 阴影垂直方向上的偏移
  8.         shadowOffsetY: 0,
  9.         // 阴影颜色
  10.         shadowColor: 'rgba(0, 0, 0, 0.5)'
  11.     }
  12. }

深色背景和浅色标签

  1. //背景色是全局的，所以直接在 option 下设置 backgroundColor
  3. setOption({
  4.     backgroundColor: '#2c343c'
  5. })
  6. //文本的样式可以设置全局的 textStyle。
  8. setOption({
  9.     textStyle: {
  10.         color: 'rgba(255, 255, 255, 0.3)'
  11.     }
  12. })

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

  1. myChart.showLoading();
  2. $.get('data.json').done(function (data) {
  3.     myChart.hideLoading();
  4.     myChart.setOption(...);
  5. });

图例组件 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. 如何相互转换逗号分隔的字符串和List

    将逗号分隔的字符串转换为List 方法 1: 利用JDK的Arrays类 [java] view plain copy   ico_fork.svg1.5 KB String str = " ...

  2. crontab中引入环境变量（比如需要执行tomcat的关闭启动）

    起因 crontab中的定时任务,执行到关闭tomcat时,报环境变量找不到 解决方案 1.使用 . /etc/profile 引入环境变量 ###推荐, 实测ubuntu12 成功 2.使用 sou ...

  3. 搭建es6开发与非开发环境babel-browser

    前言 最近打算把es6应用到项目中,但是如何在开发环境(浏览器端)直接运行es6?es6已经发布一段时间了,现在大部分是在node.js环境运行,或者通过babel编译之后运行.babel-brows ...

  4. oracle11g的内存分配不当,导致的错误ORA-01034,ORA-00838,ORA-27101

    由于开发需要,oracle11g被应用于虚拟机,所以系统资源显得弥足珍贵,百度了一下就有答案. 用dba身份进入Oracle,笔者在plsql中对数据库进行管理: show parameter sga ...

  5. 【Android Developers Training】 96. 运行一个同步适配器

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  6. 【CC2530入门教程-06】CC2530的ADC工作原理与应用

    第6课  CC2530的ADC工作原理与应用 广东职业技术学院  欧浩源 一.A/D转换的基本工作原理 将时间上连续变化的模拟量转化为脉冲有无的数字量,这一过程就叫做数字化,实现数字化的关键设备是AD ...

  7. 推荐一个基于Vue2.0的的一款移动端开发的UI框架，特别好用。。。

    一丶YDUI 一只注重审美,且性能高效的移动端&微信UI. 下面为地址自己研究去吧! 我的项目正在用,以前用的Mint-ui但是现在感觉还是这个好一点,官方给出的解释很清楚,很实用. 官方地址 ...

  8. VI修改文件

    找到路径   vi  文件名    i  添加或修改 esc   :  wq  保存退出     --------------------------------------------------- ...

  9. 最长非降子序列的O(n^2)解法

    这次我们来讲解一个叫做"最长非下降子序列"的问题及他的O(n^2)解法. 首先我们来描述一下什么是"最长非下降子序列". 给你一个长度为n的数组a,在数组a中顺 ...

  10. 使用freemarker模板生成word文档

    项目中最近用到这个东西,做下记录. 如下图,先准备好一个(office2003)word文档当做模板.文档中图片.姓名.性别和生日已经使用占位符代替,生成过程中将会根据实际情况进行替换. 然后将wor ...