js 图表处理之Echar
官网学习链接：http://echarts.baidu.com/tutorial.html#5%20分钟上手%20ECharts
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图标案例</title>
<script src="echarts/echarts.js"></script>
</head> <body>
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<div id="main3" style="width: 600px;height:400px;"></div> </body>
<script type="text/javascript"> var myChart1 = echarts.init(document.getElementById('main1'));
var option1 = {
title: {
text:'ECharts 入门示例'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis:{
data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
},
yAxis:{},
series: [
{
name:'销量',
type:'bar',
data:[5,20,36,10,10,20]
}
]
};
myChart1.setOption(option1); var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(
{
series:[
{
name:'访问来源',
type:'pie',
radius:'55%',
// roseType:'angle', //南丁格儿图
data:[
{value:235,name:'视频广告'},
{value:274,name:'联盟广告'},
{value:310,name:'邮件营销'},
{value:335,name:'直接访问'},
{value:400,name:'搜索引擎'}
]
}
]
}
); var myChart3 = echarts.init(document.getElementById('main3'));
var option3 = {
backgroundColor: '#2c343c',
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart3.setOption(option3) </script>
</html>
js 图表处理之Echar的更多相关文章
- 13个JavaScript图表（JS图表）图形绘制插件【转】
现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...
- Atitit.js图表控件总结
Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条 ...
- 一个朋友js图表开发遇到的问题 解决思路c和js
引言 不求知道一切, 只求发现一件 -- 乔治·西蒙·欧姆 附注:那些存在于梦幻中的事迹,那些儿时梦中的人物,每每看起,都觉得 .哎 .... 岁月 ... 一直在努力 ... ...
- chart.js图表库案例赏析，饼图添加文字
chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...
- Vis.js图表插件
Vis.js是一款基于JavaScript的可视化图表库,Vis.js不像其他的图表库那样仅仅支持几种常用的数据图表,比如线形图.柱状图.饼图等,Vis.js支持上百种不同类型的可视化图表类型,比如时 ...
- 求剁手的分享，如何简单开发js图表
前段时间做的一个项目里需要用到js图表,在网上找了下,大概找到了highcharts.fusioncharts这些国外产品. 因为都收费,虽然有盗版,我也不敢用,万一被找上们来就砸锅卖铁了要.自己写j ...
- 一个朋友 js图表开发问题 用 c和 js 解决
引言 不求知道一切, 只求发现一件 -- 乔治·西蒙·欧姆 附注:那些存在于梦幻中的事迹,那些儿时梦中的人物,每每看起,都觉得 .哎 .... 岁月 ... 一直在努力 ... ...
- Highcharts纯js图表库，以后可以跟客户说，你跟阿里云ECS用的图表库是同款
Highcharts是一款纯javascript编写的图表库,能够很简便的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18 ...
- 手绘风格的 JS 图表库：Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
随机推荐
- JS图片加载时获取图片宽高信息
; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...
- erase操作
#include<iostream> #include <vector> int main() { std::vector<int> vec; vec.push_b ...
- 编写jsp动态网页
默认情况下,jsp网页必须保存在TOMCAT_HOME/webapps 目录下才能被客户请求. JSP网页的主题仍然是html标签,在需要显示动态数据的地方添加<%%>标记,在其中编写合法 ...
- vue 二级列表折叠面板
请求出来的数据是二级列表,需要点击一级列表展开相应的二级列表 data(){ return { info: [ {name:'一级菜单1',lists:[{price:1},{price:2}]}, ...
- 面试之二：Redis是单线程还是多线程？以及处理模型。
Redis是单线程还是多线程?以及处理模型. 线程:单线程 处理模型:参考书<Redis 设计与实现>P151-152 
目录 漏洞利用原理 具体利用步骤 漏洞利用原理 read(, &s, 0x20uLL); if ( strstr(&s, "%p") || strstr(& ...
- js foreach
array1.forEach(callbackfn[, thisArg]) 参数 定义 array1 必需. 一个数组对象. callbackfn 必需. 一个接受最多三个参数的函数. 对于数组中的每 ...
- spring data jpa 遇到的问题
org.springframework.core.convert.ConversionFailedException: Failed to convert from type [java.lang.O ...