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 ...
随机推荐
- GDI+ Hello World
学WTL/MFC,学不会了去看WIN32. 学C/C++,学不会了去看汇编. 使用VS,不明白了去用cl.exe/link.exe 控制台下输出图片的分辨率: #include <windows ...
- DaSiamRPN学习
9月14日,2018年视觉目标跟踪挑战赛(Visual-Object-Tracking Challenge 2018)的结果在ECCV Workshop上揭晓.VOT2018共设三项任务:Baseli ...
- Deeplab
Deeplab系列是谷歌团队的分割网络. DeepLab V1 CNN处理图像分割的两个问题 下采样导致信息丢失 maxpool造成feature map尺寸减小,细节信息丢失. 空间不变性 所谓空间 ...
- mongo 集群（副本）搭建过程记录
最近搭建mongo集群,回忆总结,作以记录.整个过程主要参考以下两篇文章,但是过程并不顺利,有些问题需要记录.https://www.cnblogs.com/dba-devops/p/7130710. ...
- 【TensorFlow】TensorFlow基础 —— 模型的保存读取与可视化方法总结
TensorFlow提供了一个用于保存模型的工具以及一个可视化方案 这里使用的TensorFlow为1.3.0版本 一.保存模型数据 模型数据以文件的形式保存到本地: 使用神经网络模型进行大数据量和复 ...
- MongoDB疑难解析：为什么升级之后负载升高了？
本文是"我和MongoDB的故事"征文比赛的二等奖得主李鹏冲的文章.下面我们一起来欣赏下. 问题 近期线上一个三分片集群从 3.2 版本升级到 4.0 版本以后,集群节点的 CPU ...
- ASP.NET Core使用环境变量
前言 通常在应用程序开发到正式上线,在这个过程中我们会分为多个阶段,通常会有 开发.测试.以及正式环境等.每个环境的参数配置我们会使用不同的参数,因此呢,在ASP.NET Core中就提供了相关的环境 ...
- 编译原理实验之SLR1文法分析
---内容开始--- 这是一份编译原理实验报告,分析表是手动造的,可以作为借鉴. 基于 SLR(1) 分析法的语法制导翻译及中间代码生成程序设计原理与实现1 .理论传授语法制导的基本概念,目标代码结 ...
- ajax面试要点
目录 目录 ajax是什么? 优点 缺点 ajax的工作原理 如何创建一个ajax(ajax的交互模型) ajax过程中get和post的区别 同步和异步的区别 JavaScript 的同源策略 如何 ...
- Shell脚本 硬盘监控
用shell 写了一个硬盘监控的小程序 #!/bin/bash MAX=95 EMAIL=zonghua@iyunshu.com PART=sda1 IP=`ifconfig |grep -w ...