echarts 【图表的基本使用】
一.柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图</title>
<script src="JS/echarts.js"></script>
<style>
#chart{
width: 400px;
height: 300px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="chart"> </div>
<script>
//对echarts进行初始化
var myCharts =echarts.init(document.getElementById("chart")); //指定图表的配置项和数据
var option = {
title: { //标题
text: '柱状图'
},
tooltip: {},
legend: {//图例
data:['销量']
},
xAxis: {//x坐标的数据
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [, , , , , ] //x坐标对应的数据
}]
};
// 使用刚指定的配置项和数据显示图表
myCharts.setOption(option);
</script>
</body>
</html>
二.地图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>疫情地图</title>
<!--导入echarts JS包-->
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#map{
width: 700px;
height: 500px;
background-color: blue; }
</style>
</head>
<body>
<div id="map"> </div>
<script type="text/javascript">
//图例数据分布
var splitList = [{start:1000,end:9999},
{start:100,end:999},
{start:10,end:99},
{start:1,end:9}];
var mydata = [
{name:"北京",value:10},{name:"内蒙古",value:200},
{name:"辽宁",value:200},{name:"香港",value:200},
{name:"吉林",value:200},{name:"海南",value:200},
{name:"黑龙江",value:200},{name:"广东",value:200},
{name:"甘肃",value:200},{name:"宁夏",value:200},
{name:"青海",value:200},{name:"台湾",value:20},
{name:"新疆",value:200},{name:"澳门",value:200},
{name:"山东",value:20},{name:"西藏",value:200},
{name:"浙江",value:20},{name:"福建",value:200},
{name:"河北",value:200},{name:"湖南",value:200},
{name:"山西",value:100},{name:"湖北",value:200},
{name:"贵州",value:200},{name:"云南",value:200},
{name:"河南",value:200},{name:"四川",value:200},
{name:"重庆",value:20},{name:"广西",value:20},
{name:"陕西",value:200},{name:"安徽",value:20},
{name:"江苏",value:200},{name:"江西",value:200},
];
//初始化China.js
function initChina(){
//json格式参数
var optionMap = {
backgroundColor:"#eeeeee",
series :{
name: '危险指数：',
type: 'effectScatter',
type:"map",
mapType:'china', //地图类型
data:mydata //数据显示
},
//标题
title: {
text: '疫情地图',
left: 'center',
textStyle: {
color: 'white',
fontSize:25
}
},
//显示图例
visualMap:{
left:"left",
bottom:"bottom",
splitList:splitList,
color:['red','orange','yellow','green'],
show:true
},
//提示框组件
tooltip: {
trigger: 'item',
formatter:'{b} <br/> ', //{c@[2]}
show:true
},
//图例
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['危害性'],
textStyle: {
color: '#fff'
}
},
//
geo: {
map: "china",
label: {
emphasis: {
show: false
}
},
roam: true,
center:[112.38,37.67],
zoom:7,
itemStyle: {
normal: {
areaColor: "#323c48",
borderColor: "#000000"
},
emphasis: {
areaColor: "#2a333d"
}
}
}, //显示省份
label:{
normal:{
show:true
},
emphasis:{
show:true,
color:'red'
}
}, }; var myChart = echarts.init(document.getElementById("map"));
myChart.setOption(optionMap);
}
//echarts初始化
initChina(); //中国地图初始化执行 </script> </body>
</html>
需要echart包文件的童鞋点击http://dt1.8tupian.com/11128a19b200.pg3获取资料
echarts 【图表的基本使用】的更多相关文章
- echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
- echarts图表标签（axisLabel）折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
- Echarts图表控件使用总结2(Line，Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ASP.NET MVC + ECharts图表案例
废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...
- 怎样把echarts图表做成响应式的
如果想要把echarts图表给做成响应式的那么就应该用rem 单位,给图表的外围容器设置rem 单位,然后调用jquery 的resize方法,$(window).resize(function(){ ...
- Echarts图表统计学习
史上最全的Echarts图表学习文档 http://echarts.baidu.com/doc/doc.html 勤加练习,多做总结! http://www.stepday.com/topic/?79 ...
- 基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
随机推荐
- 9. HanLP《自然语言处理入门》笔记--9.关键词、关键句和短语提取
笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 9. 信息抽取 信息抽取是一个宽泛的概念,指的是从非结构化文本中提取结构化信息的一 ...
- 《Android Studio实战 快速、高效地构建Android应用》--三、重构代码
要成为高效的Android程序员,需要头脑灵活,能够在开发.调试和测试的过程中重构代码,重构代码最大的风险是可能会引入意外的错误,Android Studio通过分析某些具有危险性的重构操作来降低风险 ...
- [python]locals内置函数
locals() Update and return a dictionary representing the current local symbol table. Free variables ...
- Dubbo（五）：Dubbo中的URL统一资源模型与Dubbo协议
一.URL简介 URL也就是Uniform Resource Locator,中文叫统一资源定位符.Dubbo中无论是服务消费方,或者服务提供方,或者注册中心.都是通过URL进行定位资源的.所以今天来 ...
- Open Images V4 下载自己需要的类别
OpenImages V4数据集描述1)这个v4数据集主要有两种用途:对象检测及分类,意思是说可以用这个数据集训练出对象检测模型,用于识别图像中的对象类别及位置边框.视觉关系检测,比如你用这个v4数据 ...
- learn about sqlserver files and filegroup
The filegroup is similar as tablespace in Oracle. At first, I will show that hot to check file amd f ...
- 【笔记】最短路——SPFA算法
##算法功能 找最短路(最长路?) ##算法思想 用一个节点k更新节点i到节点j的最短路 ##邻接链表存储 基础而高效的图的存储方式 存的是单向边(无向边可以看成两条有向边) ##实现 维护节点i到源 ...
- TCP协议三次握手（通信）
在<计算机网络>一书中其中有提到,三次握手的目的是“为了防止已经失效的连接请求报文段突然又传到服务端,因而产生错误”,这种情况是:一端(client)A发出去的第一个连接请求报文并没有丢失 ...
- java服务器端线程体会
一个完整的项目包括服务器和客服端 服务器端初步编写: (1) 服务器端应用窗口的编写 (服务器类Server): 包括窗口和组件的一些设置, 添加一些客服端的元素,如客服端在线用户表(Vector), ...
- c#学习笔记之委托
委托 最近自己在调试C#项目,发现经常可以看到委托和lambda表达式,各种花里胡哨的写法把我给整的云里雾里的,于是自己特意花了一点功夫来整理关于delegate的相关知识,方便自己日后查阅. 何为委 ...