echarts3.0使用总结
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
echarts3.0使用总结的更多相关文章
- asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送
先看看效果: 感谢QQ群18668853的群主,无私的公开课,全是干货,当初学的时候,群主用的是jquery.flot做图表,我这里改成百度的Echarts3.0,这算是自己的修改吧,喜欢的可以去下载 ...
- Echarts3.0 引入百度地图(转载)
转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...
- vue cli3.0 结合echarts3.0和地图的使用方法
echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...
- vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图，折线图)
一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使 ...
- echarts3.0 仪表盘实例更改完成占用率实例
需要完成的项目效果 官方实例效果 基本思路: 首先引入jquery和echarts3.0库. 需要两个仪表盘,一个仪表盘是纯色灰色,在底部.startAngle 和endAngle永远是最大值,默认为 ...
- echarts3.0之关系图详解
近期需要使用echarts关系图,当我打开echarts3.0官方demo后发现,对于新手而言,直接看懂有点儿难度,固写这样一篇文章让自己加深记忆,也便新手迅速上手.话不多说,开整生气! echart ...
- ECharts3.0饼状图使用问题总结
前提:本人使用的是IE9浏览器 1.IE中无法显示,谷歌却显示正常的问题: 1)情况一 var myChart_cols<%=i%> = echarts.init(document.get ...
- echarts3.0 本期累计堆叠
@{ ViewBag.Title = "barlj"; } <h2>barlj</h2> <div id="main" style ...
- echarts3.0版本断点连线的处理
项目应用到echarts图表组件.官网的demo中出现空数据会断开.经过跟踪调试.修改echarts.js以下代码即可实现断点连线功能(需要将空数据处理成'-'.这样才能均值): for (var ...
随机推荐
- 解决Socket粘包问题——C#代码
解决Socket粘包问题——C#代码 前天晚上,曾经的一个同事问我socket发送消息如果太频繁接收方就会有消息重叠,因为当时在外面,没有多加思考 第一反应还以为是多线程导致的数据不同步导致的,让他加 ...
- IOS 固定定位底部input输入框，获取焦点时弹出的输入法键盘挡住input
移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...
- 【Android Developers Training】 77. 使用Wi-Fi P2P进行服务搜索
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- Linux下BMP文件不能正常读取问题的解决办法
今天将之前在win下编好的读取BMP图像功能移植到UNIX下. 碰到的第一个问题是,Linux下的BMP文件头的结构体需要自己重新定义一遍. 第二个问题是,需要搞清楚Linux是32位的还是64位的. ...
- htm5拖放和画布
拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 首先,为了使元素可拖动,把 draggable 属性设置为 true ondr ...
- Android精品源码与技术博文
Android精品源码android遵循Material Design风格天气源码基于exoplay 自定义播放器 支持直播 1 ExoUserPlayer 基本播放器...几种动画效果Animati ...
- vijos1011题解
题目: 顺治喜欢滑雪,这并不奇怪,因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待太监们来载你.顺治想知道载一个区域中最长的滑坡.区域 ...
- P2286 [HNOI2004]宠物收养场
题目描述 凡凡开了一间宠物收养场.收养场提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,凡凡根据领养者的要求通过他自己发明的一个特殊的公式,得出该领 ...
- Servlet端 接收不到4096，8192长度的JSON参数
Servlet端的日志显示,客户端传过来的JSON参数是空值. 但是在客户端的日志显示,已将JSON参数传送过去. 经调查发现,加减1位后的JSON参数均可以正常传送. 只有8192,4096长度的J ...
- 浅谈身为小白学习Linux系统的四点实用建议
游戏.办公.安全,可以总结为是方便当代人们在生活中的刚需,我们大都是这些服务的使用者,而把单个功能整合起来那就必须谈到互联网,自然而然通过互联网要将Service发送给Service manageme ...