echarts 外观效果修改
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/echarts.js"></script>
</head>
<body>
<div class="col-xs-4">
<h3>条形图</h3>
<div id="main" style="width: 500px;height: 400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var option = {
title:{
text:"第一个图标演示示例"
},
tooltip:{
text:"this is tool tip"
},
legend:{
data:['销量']
},
xAxis:{
data:["寸衫","羊毛衫","裤子","袜子","皮鞋","帽子"]
},
yAxis:{},
series:[{
name:["销量"],
type:"bar",
data:[5,20,36,6,43,67]
}]
}; // myChart.setOption(option); myChart.setOption({
title:{
text:"第一个图标演示示例"
},
tooltip:{
text:"this is tool tip"
},
legend:{
data:['销量']
},
xAxis:{
data:["寸衫","羊毛衫","裤子","袜子","皮鞋","帽子"]
},
yAxis:{},
series:[{
name:["销量"],
type:"bar",
data:[5,20,36,6,43,67]
}]
}); </script>
</div>
<div class="col-xs-4">
<h3>饼状图</h3>
<div id="tbSecond" style="width: 500px;height: 400px;"></div>
<script type="text/javascript">
var tbSecond = echarts.init(document.getElementById("tbSecond"));
// alert(tbSecond);
var pieOption = {
title:{
text:"饼状图"
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
};
// alert(pieOption);
tbSecond.setOption(pieOption); </script>
</div>
<div class="col-xs-4">
<h3>饼状图加阴影</h3>
<div id="bzt2" style="width: 500px;height: 400px;"></div>
<script type="text/javascript">
var bzt2 = echarts.init(document.getElementById("bzt2"));
bzt2.setOption({
title:{
text:"饼状图"
},
itemStyle:{
emphasis:{
shadowBlur:200,
shadowColor:"rgba(0,0,0,0.8)"
}
},
series:[
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
});
</script>
</div>
<div class="col-xs-4">
<h3>饼状图加背景</h3>
<div id="bzt3" style="width: 500px;height: 400px;"></div>
<script type="text/javascript">
var bzt3 = echarts.init(document.getElementById("bzt3"));
bzt3.setOption({
title:{
text:"饼状图"
},
backgroundColor:"#EEEFF4",
itemStyle:{
emphasis:{
shadowBlur:200,
shadowColor:"rgba(0,0,0,0.8)"
}
},
series:[
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
});
</script>
</div>
<div class="col-xs-4">
<h3>放大缩小</h3>
<div id="dataZoom" style="width: 500px;height: 400px;"></div>
<script type="text/javascript">
var dataZoom = echarts.init($("#dataZoom")[0]);
dataZoom.setOption(
{
xAxis:{
type:"value"
},
yAxis:{
type:"value"
},
dataZoom:[
{
type:"slider",
start:10,
end:60
}
],
series:[
{
type:"scatter",
itemStyle:{
normal:{
opacity:0.8
}
},
symbolSize:function(val)
{
return val[2] * 40;
},
data:[["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
}
]});
</script>
</div>
<div class="col-xs-4">
<h3>Scatter-large</h3>
<div id="sl" style="width: 500px;height: 400px;"></div>
<script type="text/javascript">
var sl = echarts.init($("#sl")[0]);
var sloption = {
tooltip : {
trigger: 'axis',
showDelay : 0,
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
zlevel: 1
},
legend: {
data:['sin','cos']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'value',
scale:true
}
],
yAxis : [
{
type : 'value',
scale:true
}
],
series : [
{
name:'sin',
type:'scatter',
large: true,
symbolSize: 3,
data: (function () {
var d = [];
var len = 10000;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
d.push([
x,
//Math.random() * 10
(Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
//console.log(d)
return d;
})()
},
{
name:'cos',
type:'scatter',
large: true,
symbolSize: 2,
data: (function () {
var d = [];
var len = 20000;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
d.push([
x,
//Math.random() * 10
(Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
//console.log(d)
return d;
})()
}
]
}; sl.setOption(sloption);
</script>
</div>
<div class="col-xs-4">
<h3>微博签到</h3>
<div id="qd" style="width: 500px;height: 400px;"></div>
<script type="text/javascript">
var qd = echarts.init($("#qd")[0]);
qd.showLoading(); $.get('http://echarts.baidu.com/gallery/data/asset/data/weibo.json', function (weiboData) {
qd.hideLoading(); weiboData = weiboData.map(function (serieData, idx) {
var px = serieData[0] / 1000;
var py = serieData[1] / 1000;
var res = [[px, py]]; for (var i = 2; i < serieData.length; i += 2) {
var dx = serieData[i] / 1000;
var dy = serieData[i + 1] / 1000;
var x = px + dx;
var y = py + dy;
res.push([x, y, 1]); px = x;
py = y;
}
return res;
});
qd.setOption(option = {
backgroundColor: '#404a59',
title : {
text: '微博签到数据点亮中国',
subtext: 'From ThinkGIS',
sublink: 'http://www.thinkgis.cn/public/sina',
left: 'center',
top: 'top',
textStyle: {
color: '#fff'
}
},
legend: {
left: 'left',
data: ['强', '中', '弱'],
textStyle: {
color: '#ccc'
}
},
geo: {
name: '强',
type: 'scatter',
map: 'china',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
name: '弱',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 1,
large: true,
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: 'rgba(37, 140, 249, 0.8)',
color: 'rgba(37, 140, 249, 0.8)'
}
},
data: weiboData[0]
}, {
name: '中',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 1,
large: true,
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: 'rgba(14, 241, 242, 0.8)',
color: 'rgba(14, 241, 242, 0.8)'
}
},
data: weiboData[1]
}, {
name: '强',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 1,
large: true,
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: 'rgba(255, 255, 255, 0.8)',
color: 'rgba(255, 255, 255, 0.8)'
}
},
data: weiboData[2]
}]
});
});
</script>
</div>
<div class="col-xs-4">
<h3>极坐标双轴线</h3>
<div id="jzb" style="width: 500px;height: 400px;"></div>
<script type="text/javascript">
var jzb = echarts.init($("#jzb")[0]);
var data = []; for (var i = 0; i <= 100; i++) {
var theta = i / 100 * 360;
var r = 5 * (1 + Math.sin(theta / 180 * Math.PI));
data.push([r, theta]);
} var jzboption = {
title: {
text: '极坐标双数值轴'
},
legend: {
data: ['line']
},
polar: {},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
angleAxis: {
type: 'value',
startAngle: 0
},
radiusAxis: {
},
series: [{
coordinateSystem: 'polar',
name: 'line',
type: 'line',
data: data
}]
}; jzb.setOption(jzboption);
</script>
</div>
<div class="col-xs-4">
<h3>浏览器占比</h3>
<div id="llqzb" style="width: 500px;height: 400px;"></div>
<script type="text/javascript">
var llqzb = echarts.init($("#llqzb")[0]);
var llqzboption = {
title: {
text: '浏览器占比变化',
subtext: '纯属虚构',
x:'right',
y:'bottom'
},
tooltip: {
trigger: 'item',
backgroundColor : 'rgba(0,0,250,0.2)'
},
legend: {
data: (function (){
var list = [];
for (var i = 1; i <=28; i++) {
list.push(i + 2000);
}
return list;
})()
},
visualMap: {
color: ['red', 'yellow']
},
radar: {
indicator : [
{ text: 'IE8-', max: 400},
{ text: 'IE9+', max: 400},
{ text: 'Safari', max: 400},
{ text: 'Firefox', max: 400},
{ text: 'Chrome', max: 400}
]
},
series : (function (){
var series = [];
for (var i = 1; i <= 28; i++) {
series.push({
name:'浏览器（数据纯属虚构）',
type: 'radar',
symbol: 'none',
itemStyle: {
normal: {
lineStyle: {
width:1
}
},
emphasis : {
areaStyle: {color:'rgba(0,250,0,0.3)'}
}
},
data:[
{
value:[
(40 - i) * 10,
(38 - i) * 4 + 60,
i * 5 + 10,
i * 9,
i * i /2
],
name:i + 2000
}
]
});
}
return series;
})()
};
llqzb.setOption(llqzboption);
</script>
</div>
</body>
</html>
echarts 外观效果修改的更多相关文章
- Cesium官方教程8-- 几何体和外观效果
原文地址:https://cesiumjs.org/tutorials/Geometry-and-Appearances/ 几何体和外观效果(Geometry and Appearances) 这篇教 ...
- WPF，Silverlight与XAML读书笔记第四十四 - 外观效果之样式
说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 如果你有Web编程的经验,你会知道使用Sty ...
- 大幅度改变celery日志外观，修改成日志可点击跳转和鲜艳五彩日志，解决脚本中已添加handler的logger和框架日志重复记录问题。
大幅度改变celery日志外观,修改成日志可点击跳转和鲜艳五彩日志,解决脚本中已添加handler的logger和框架日志重复记录问题.打猴子补丁. 先把脚本中的所有logger的handlers全部 ...
- WPF，Silverlight与XAML读书笔记第四十五 - 外观效果之模板
说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 模板允许用任何东西完全替换一个元素的可视树, ...
- Android NumberPicker默认外观的修改
NumberPicker是Android3.0之后引入的一个控件,在以后的TimePicker和DatePicker时间控件里边都有引用,NumberPicker本身并没有提供接口给开发者修改其默认外 ...
- echarts细节的修改（2）：矩形数图，柱状图，折线图，雷达图等
1.矩形数图的配置,是直接拿饼图的配置 然后将type换成treemap. 修改类型 option.series.type = 'treemap'; 关闭面包屑导航 option.series.bre ...
- WPF，Silverlight与XAML读书笔记第四十六 - 外观效果之三皮肤与主题
说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 皮肤 皮肤是应用程序中样式与模板的集合,可以 ...
- linux shell的输出效果修改方法(界面颜色)
文本终端的颜色可以使用“ANSI非常规字符序列”来生成.举例: echo -e "\033[44;37;5m ME \033[0m COOL" 以上命令设置背景成为蓝色,前景白色, ...
- Echarts动画效果：实现数据左右移动
1.业务背景 图形实时从后台获取数据,让图形从最右边出现,每隔一秒向左移一位,当最左边的数据移到Y轴时,最左边的数据移出屏幕,最右边增加一个数.实现一个从右往左动画的效果 2.先看下项目中的demo解 ...
随机推荐
- CodeSmith连Oracle
据说CodeSmith连Oracle特别麻烦,什么WIN7下不行,64位下不行.之前有个同事为了用上CodeSmith,还特地装了个XP虚拟机. 其实,还是那个连接串的问题. 操作系统64位,就要用6 ...
- oracle 导出导入不含数据的空库
10g或之前,用exp导出,imp导入,带上rows=n参数 11g或以上,用expdp导出,impdp导入,带上CONTENT = METADATA_ONLY 参数 expdp带上此参数,不导出数据 ...
- SQLServer删除数据库
删除时提示: 网上找了一段: USE MASTER GO DECLARE @dbname SYSNAME SET @dbname = 'shujk' --这个是要删除的数据库库名 ) DECLARE ...
- UVA 437 The Tower of Babylon巴比伦塔
题意:有n(n≤30)种立方体,每种有无穷多个.要求选一些立方体摞成一根尽量高的柱子(可以自行选择哪一条边作为高),使得每个立方体的底面长宽分别严格小于它下方立方体的底面长宽. 评测地址:http:/ ...
- <input type=XXXXX>
选框,提交/重置按钮等,下面一一介绍. 1,type=text 输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等.当然这也是Input ...
- GEO,IGSO,MEO,LEO
GEO(Geosynchronous Eearth Orbit):地球静止轨道卫星 IGSO(Inclined Geosynchronous Satellite Orbit):倾斜轨道同步卫星 地球同 ...
- maven工具使用
一.工具安装: 所需工具 : JDK 1.8Maven 3.3.3 1.安装JDK 和 JAVA_HOME 2.添加 M2_HOME 和 MAVEN_HOME 3.添加到环境变量 - PATH 4.验 ...
- NABCD项目需求报告
项目:记账小账本 N:need 需求 根据我们的调查,很多人虽然知道记账有很多的好处,但是因为种种的原因,我们都没能养成记账的好习惯,所以我们所做的记账小软件,说到底是一个行为养成类的软件,而这类软件 ...
- Windows下手动安装redis服务
1.Redis本身不支持windows,但是有另外的团队在维护着一个windows下的版本 2.下载地址: https://github.com/MSOpenTech/redis 2.8的版本在源 ...
- Mysql操作符号
1.比较运算符: = 相等 <> 不等于 != 这个也可以 > 大于 < 小于 >= 大于等于 <= 小于等于 2.逻辑运算符: is null ...