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解 ...
随机推荐
- 2016/4/7 datatype：①json ②XML
①JSON 1,postjsonxml.php json用循环方式处理传来的值 for(key in data) for(var i=0;i<data.length;i++){data ...
- qemu所支持的网卡
1 命令 -net nic 创建一个network interface card,即创建一个网卡,默认是e1000网卡. 2 qemu所支持的网卡类型 2.1 rtl8139 Realtek 10/1 ...
- iptraf 网卡 ip 端口 监控 netstat 关闭端口方法
18 commands to monitor network bandwidth on Linux server – BinaryTides https://www.binarytides.com/l ...
- 【196】Dell 移动工作站系统安装方法
会出现找不到硬盘的情况,解决方法:安装系统的时候需要加载阵列卡驱动 下载阵列卡驱动,以 Dell T7610 为例根据安装系统进行选择,地址:http://zh.community.dell.com/ ...
- 初探js闭包
1.变量的作用域:全局变量.局部变量 函数内部可以直接读取局部变量 js代码 var n=2; function fun(){ alert(n); } fun(); //2 函数外部不能读取函数内部 ...
- angular中transclude的理解
今天被这个transclude搞糊涂了,弄了半天,才知道原来使用起来很简单.很烦恼为社么书中的对于这个的介绍这么晦涩难懂.直到看到了这篇文章,才让我弄清楚了. 一.transclude介绍 trans ...
- HDU6012:Lotus and Horticulture（扫描线）（前缀和）
传送门 题意 给出n种植物的适宜培育温度区间[l,r],低于下限获值c,高于上限获值b,其他获值a 分析 首先考虑应该尝试选择哪些点:区间的左右端点.与区间左右端点距离0.50.5的点,这样就一定可以 ...
- bzoj 3612: [Heoi2014]平衡【整数划分dp】
其实就是-n~n中求选k个不同的数,和为0的方案数 学到了新姿势叫整数划分,具体实现是dp 详见:https://blog.csdn.net/Vmurder/article/details/42551 ...
- 【爬坑系列】之vxlan网络实现
linux 内核从3.7之后就内部集成了vxlan功能,所以可以使用linux内核提供的vxlan功能,经过配置创建vxlan网络. 而从Docker自Docker Engine 1.9之后,就自带o ...
- NOIp 2017 奶酪 【并查集】 By cellur925
题目传送门 Orz去年考场上做这道题的我应该还在抱怨没学过空间几何,不一会太困了就开始打瞌睡,然后为了防止睡觉开始在devc++上写默写离骚(逃 思路:如果两个空洞相交,那么把他们并在一个集合里.最后 ...