首先引入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 圆形图、柱状图的更多相关文章

  1. echarts折线图柱状图的坐标轴的颜色及样式的设置

    基本用法请查看echarts官网. 一.图例legend的设置. 1.字体和颜色的设置 textStyle:{ fontSize:15, color:'#fff' } 2.样式的设置 legend: ...

  2. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  3. echarts —— 绘制横向柱状图(圆角、无坐标轴)

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

  4. Echarts 甘特图教程

    Echarts甘特图教程  echarts官网实例: https://gallery.echartsjs.com/editor.html?c=xEYpsVs30s 效果:  代码: <html& ...

  5. 如何基于 echarts 实现区间柱状图(包括横向)?

    目录 需求 借鉴 echarts 的 demo 最终实现思路 实现效果 遇到的问题: 代码映射 源码 最后 始终如一 需求 需要利用 echarts 实现区间柱状图,效果如下: 效果来源于:g2-柱状 ...

  6. v-charts 绘制柱状图、条形图、水球图、雷达图、折线图+柱状图,附官网地址

    v-charts 官网地址:https://v-charts.js.org/#/ 柱状图: <template> <ve-histogram :data="chartDat ...

  7. ChartControl 折线图 柱状图

    添加折线图(柱状图) 拖动ChartControl到Form上 在Series Collection中添加Line(或Bar) DevExpress.XtraCharts.Series series1 ...

  8. xml 实现圆形图 和 椭圆形图

    1. 效果图 2.圆形图 <ImageView android:layout_width="wrap_content" android:layout_height=" ...

  9. echarts雷达图

    用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...

随机推荐

  1. BZOJ 1705: [Usaco2007 Nov]Telephone Wire 架设电话线 DP + 优化 + 推导

    Description 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务 于是,她们要求FJ把那些老旧的电话线换成性能更好的新电话线. 新的电话线架设在已有的N(2 <= ...

  2. Day7 字符串和常用数据结构

    字符串和常用数据结构 使用字符串 第二次世界大战促使了现代电子计算机的诞生,当初的想法很简单,就是用计算机来计算导弹的弹道,因此在计算机刚刚诞生的那个年代,计算机处理的信息主要是数值,而世界上的第一台 ...

  3. Linux shell文本处理工具

    搞定Linux Shell文本处理工具,看完这篇集锦就够了 Linux Shell是一种基本功,由于怪异的语法加之较差的可读性,通常被Python等脚本代替.既然是基本功,那就需要掌握,毕竟学习She ...

  4. Mysql入门详解

    目录 数据库之Mysql 一 .简单了解数据库 二.Mysql的使用 三.多表查询 数据库之Mysql 本篇文章为观看某教学视频后所作个人总结 一 .简单了解数据库 1.1常见关系型数据库 mysql ...

  5. 【hihocoder 1333】平衡树·Splay2

    [题目链接]:http://hihocoder.com/problemset/problem/1333 [题意] [题解] 伸展树; 要求提供操作: 1.插入一个元素,两个权值,id作为查找的比较权值 ...

  6. 执行计划中Using filesort,Using temporary相关语句的优化解决

    昨天听开发人员提到,相关的彩票网页当中一个页面刷新的很慢,特别是在提取数据的时候,今天早上一到,便去找开发人员要去相关的也没进行浏览,窥探哪些数据出现了问题,开发人员使用PHP开发,所以我用IE很容易 ...

  7. I - Tunnel Warfare

    I - Tunnel Warfare HDU - 1540 思路:原来以为自己已经完全理解了线段树,现在发现其实还差一些火候,做题的时候太拘泥于格式,思路不是很能放开. #include<cst ...

  8. iOS_网络请求_代理方式

    #pragma mark - 网络请求代理方式(异步) - (IBAction)DelegateButtonDidClicked:(UIButton *)sender { // 1.拼接 urlStr ...

  9. Delicious Apples (hdu 5303 贪心+枚举)

    Delicious Apples Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Other ...

  10. Android Internet - WebView 的使用

    WebView是Android 提供的操作网页的一个组件. 用于浏览网页及其它Internet资源. 这里总结了一些WebView 的经常使用接口.和2个小演示样例程序用于自己开发时直接使用.就不用再 ...