echarts 圆形图、柱状图
首先引入echarts的js包
<script type="text/javascript" src="js/esl.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
然后先准备一个容器,存放echarts画好的图,也就是定义一个存放canvas画布div
<div id="main" style="width:100%;height:350px;></div>
接下来路径配置和开始画之前的一些准备,
<script type="text/javascript">
// 路径配置
require.config({
paths: {
'echarts': 'js/echarts',
'echarts/chart/pie': 'js/echarts'
}
}); require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
],
function(ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main')); option = {
//代码主要部分
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
接下来就在 option={}; 这里面写最重要的代码部分
下面这个链接是echarts官网的一个例子链接,http://echarts.baidu.com/demo.html#bar-stack
另外附上一段我自己写的圆环和柱状图:
1.圆环
option = {
title: {
text: '2017年度市级运动员统计汇总',
subtext: '',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'horizontal',
x: 'center',
y: '260px',
data: ['普通运动员', '重点人数', '输送人数', '退役人数']
},
toolbox: {
show: true },
calculable: true,
series: [{
name: '访问来源',
type: 'pie',
radius: ['25%','55%'],
center: ['50%', '50%'],
data: [
{ value: , name: '普通运动员' },
{ value: , name: '重点人数' },
{ value: , name: '输送人数' },
{ value: , name: '退役人数' },
]
}],
color:['#f05a4b','#f49902','#1dab91','#0078d7']
};
2.柱状图
option = {
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
x: 'center',
y: '320px',
data:['预计成绩','实际成绩']
},
xAxis: [
{
type: 'category',
data: ['田径','游泳','举重','网球','羽毛球','乒乓球','跆拳道']
}
],
yAxis: [
{
type: 'value',
name: '(奖牌数)',
}
],
series: [
{
name:'预计成绩',
type:'bar',
data:[2,5,6,7,5,2,8],
itemStyle: {
//柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多
normal: {
//柱形图圆角,初始化效果
barBorderRadius:[2, 2, 0, 0]
}
},
barGap:'0%'
},
{
name:'实际成绩',
type:'bar',
data:[5,4,10,4,5,6,4],
itemStyle: {
//柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多
normal: {
//柱形图圆角,初始化效果
barBorderRadius:[2,2, 0, 0]
}
},
barGap:'0%'
}
],
color:['#0078d7','#f49902']
};
最后别忘了这一句,很重要,要不然就显示不出来了。
myChart.setOption(option);
运行效果图:
==================================================================================================================
echarts 圆形图、柱状图的更多相关文章
- echarts折线图柱状图的坐标轴的颜色及样式的设置
基本用法请查看echarts官网. 一.图例legend的设置. 1.字体和颜色的设置 textStyle:{ fontSize:15, color:'#fff' } 2.样式的设置 legend: ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- echarts —— 绘制横向柱状图(圆角、无坐标轴)
UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...
- Echarts 甘特图教程
Echarts甘特图教程 echarts官网实例: https://gallery.echartsjs.com/editor.html?c=xEYpsVs30s 效果: 代码: <html& ...
- 如何基于 echarts 实现区间柱状图(包括横向)?
目录 需求 借鉴 echarts 的 demo 最终实现思路 实现效果 遇到的问题: 代码映射 源码 最后 始终如一 需求 需要利用 echarts 实现区间柱状图,效果如下: 效果来源于:g2-柱状 ...
- v-charts 绘制柱状图、条形图、水球图、雷达图、折线图+柱状图,附官网地址
v-charts 官网地址:https://v-charts.js.org/#/ 柱状图: <template> <ve-histogram :data="chartDat ...
- ChartControl 折线图 柱状图
添加折线图(柱状图) 拖动ChartControl到Form上 在Series Collection中添加Line(或Bar) DevExpress.XtraCharts.Series series1 ...
- xml 实现圆形图 和 椭圆形图
1. 效果图 2.圆形图 <ImageView android:layout_width="wrap_content" android:layout_height=" ...
- echarts雷达图
用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...
随机推荐
- BZOJ 1705: [Usaco2007 Nov]Telephone Wire 架设电话线 DP + 优化 + 推导
Description 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务 于是,她们要求FJ把那些老旧的电话线换成性能更好的新电话线. 新的电话线架设在已有的N(2 <= ...
- Day7 字符串和常用数据结构
字符串和常用数据结构 使用字符串 第二次世界大战促使了现代电子计算机的诞生,当初的想法很简单,就是用计算机来计算导弹的弹道,因此在计算机刚刚诞生的那个年代,计算机处理的信息主要是数值,而世界上的第一台 ...
- Linux shell文本处理工具
搞定Linux Shell文本处理工具,看完这篇集锦就够了 Linux Shell是一种基本功,由于怪异的语法加之较差的可读性,通常被Python等脚本代替.既然是基本功,那就需要掌握,毕竟学习She ...
- Mysql入门详解
目录 数据库之Mysql 一 .简单了解数据库 二.Mysql的使用 三.多表查询 数据库之Mysql 本篇文章为观看某教学视频后所作个人总结 一 .简单了解数据库 1.1常见关系型数据库 mysql ...
- 【hihocoder 1333】平衡树·Splay2
[题目链接]:http://hihocoder.com/problemset/problem/1333 [题意] [题解] 伸展树; 要求提供操作: 1.插入一个元素,两个权值,id作为查找的比较权值 ...
- 执行计划中Using filesort,Using temporary相关语句的优化解决
昨天听开发人员提到,相关的彩票网页当中一个页面刷新的很慢,特别是在提取数据的时候,今天早上一到,便去找开发人员要去相关的也没进行浏览,窥探哪些数据出现了问题,开发人员使用PHP开发,所以我用IE很容易 ...
- I - Tunnel Warfare
I - Tunnel Warfare HDU - 1540 思路:原来以为自己已经完全理解了线段树,现在发现其实还差一些火候,做题的时候太拘泥于格式,思路不是很能放开. #include<cst ...
- iOS_网络请求_代理方式
#pragma mark - 网络请求代理方式(异步) - (IBAction)DelegateButtonDidClicked:(UIButton *)sender { // 1.拼接 urlStr ...
- Delicious Apples (hdu 5303 贪心+枚举)
Delicious Apples Time Limit: 5000/3000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Other ...
- Android Internet - WebView 的使用
WebView是Android 提供的操作网页的一个组件. 用于浏览网页及其它Internet资源. 这里总结了一些WebView 的经常使用接口.和2个小演示样例程序用于自己开发时直接使用.就不用再 ...