ECharts使用总结归纳
UserNAME:你为什么写这篇文章?
My:最近项目中有统计报表的需求,使用了ECharts,“度娘”过程中东查西找太麻烦,自己写一篇加深印象,方便以后查阅。
辅助文档------>https://echarts.baidu.com/option.html (里面有各种教程、配置项)
1.引用文件 https://www.echartsjs.com/download.html(我自己用的v4.2.1,我用到柱形、饼图、折线图,所有只用了 echartsmain.css、echarts.min.js、jquery.min.js这三个文件,看个人需求)
2. 为 ECharts 准备一个具备大小(宽高)的 DOM 并实现js代码
注意:由于var myChart1 = echarts.init(document.getElementById('main1'));里的echarts.init()是JS的方法,所以不能使用jQuery的元素选择器
通过ajax调用获取数据
<div id="main1" class="echars"></div>
<div id="main2" class="echars"></div>
<div id="main3" class="echars"></div>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3= echarts.init(document.getElementById('main3));
type: 'POST',
url: "@Request.RawUrl",
dataType: 'json',
data: { TIME2: TIME2 }
}).done(function (response) {
var values = new Array;
for (var i = 0; response.Success == true && i < response.Model[0].TYPELIST.length; i++) {
types.push(response.Model[0].TYPELIST[i].NAME);
values.push(response.Model[0].TYPELIST[i].NAMECOUNT);
}
var labelOption = {
normal: {
fontSize: 34,
}
};
var option = {
color: ["rgb(30,144,255)"],
title:{
textStyle: {
fontSize:5,
}
},
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
textStyle: {
fontSize: 34,
}
},
grid: {
top: '10%',
},
xAxis: {
data: types,
axisLabel:{
fontSize: 34
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 34
}
},
series: [{
name: '上报数量',
type: 'bar',
data: values,
label: labelOption,
}]
};
/*饼图*/
var option2 = {
color: ["rgb(0,206,209)", "rgb(30,144,255)"],
tooltip: {
trigger: 'item',
formatter: "{b} {c}: {d}%",
textStyle: {
fontSize: 32
}
},
legend: {
type: 'scroll',
orient: 'vertical',
bottom:'15%',
data: ['未完成', '完成'],
textStyle: {
fontSize: 34
}
},
series: [
{
name: ' ',
type: 'pie',
radius: '50%',
center: ['50%', '30%'],
data: [
{
value: response.Model[0]["UNZONCOUNT"],
name: '未完成',
{
value: response.Model[0]["OKZONCOUNT"],
name: '完成',
],
label: {
normal: {
show: true,
position:'outside',
textStyle: {
fontSize:34
}
},
emphasis: {
show: true
}
},
lableLine: {
normal: {
show: true,
},
emphasis: {
show: true
}
}
}
]
};
补充:折现图(获取数据方法大同小异)
$.ajax({
type: 'POST',
url: "@Request.RawUrl",
dataType: 'json',
data: {TIME2: TIME2 }
}).done(function (response) { var types = new Array;
var values = new Array;
types.push(Object.keys(response.Model[0]["result"]));
values.push(Object.values(response.Model[0]["result"])); var labelOption = {
normal: {
fontSize: 34,
}
}; types[0].splice(0,8);
values[0].splice(0,8); /*折线图*/
var option3= { title: {
textStyle: {
fontSize: 34,
}
}, tooltip: {
trigger: 'axis',
textStyle: {
fontSize: 34,
}
},
legend: { data: types[0] },
grid: {
containLabel: true, },
xAxis: {
type: 'category',
boundaryGap: false,
data: types[0],
axisLabel: {
fontSize: 24,
rotate:60
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 34
},
scale: true,
},
series: [{
name: '上报数量',
type: 'line',
data: values[0],
label: labelOption,
itemStyle: {
normal: {
color: '#436EEE',
lineStyle: {
color:'#436EEE'
}
}
}
}]
};
具体配置参数可参考 https://echarts.baidu.com/option.html#title
以下是最重要的!!!!!柱形和饼图配置好后 画在div上
myChart1.setOption(option);
myChart2.setOption(option2);
myChart3.setOption(option3);
ECharts使用总结归纳的更多相关文章
- echarts——各个配置项详细说明总结
前 言 最近做了个关于各种图表的项目,用到了echarts , 关于各个配置项刚开始用好多都不懂,有些地方需要改不知道改哪个参数,就在网上查了各种,总结规整了一下,跟大家分享学习一下.(e ...
- CSDN开源夏令营 百度数据可视化实践 ECharts(4)
ECharts知识点总结: 在应用过程中总会遇到一些难以理解的概念和属性,这里就总结了一下比較难的知识点,方便理解概念.进而更好的掌握ECharts. (1)1. 一个完整的option包括什么?能 ...
- 一起来玩echarts系列(一)------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
- 数据图表插件Echarts(一)
一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
- ECharts数据图表系统? 5分钟上手!
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
- knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...
随机推荐
- Tomcat源码分析 (五)----- Tomcat 类加载器
在研究tomcat 类加载之前,我们复习一下或者说巩固一下java 默认的类加载器.楼主以前对类加载也是懵懵懂懂,借此机会,也好好复习一下. 楼主翻开了神书<深入理解Java虚拟机>第二版 ...
- MacOS VSCode 安装 GO 插件失败问题解决
0x00 问题重现 Installing golang.org/x/tools/cmd/guru FAILED Installing golang.org/x/tools/cmd/gorename F ...
- Hive安装与部署
进去root权限(su) 1.从https://mirrors.tuna.tsinghua.edu.cn/apache/hive/hive-1.2.2/apache-hive-1.2.2-bin.ta ...
- c#Winform自定义控件-目录
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...
- 【java提高】(18)---静态内部类和非静态内部类
java提高](18)-静态内部类和非静态内部类 定义 放在一个类的内部的类我们就叫内部类. 自己从开发到现在其实用到内部类主要在两个地方会考虑用内部类: 1.使用静态内部类的单例模式 2.将Json ...
- CSS布局:元素水平居中
CSS布局之元素水平居中 本文将依次介绍在不同条件下实现水平居中多种方法 一.使用 text-align: center : 适用于块级元素内部的行内元素水平居中(也适用于图片的水平居中) 此方法对i ...
- 一文了解Python常见的序列化操作
关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...
- 《Java 8 in Action》Chapter 8:重构、测试和调试
我们会介绍几种方法,帮助你重构代码,以适配使用Lambda表达式,让你的代码具备更好的可读性和灵活性.除此之外,我们还会讨论目前比较流行的几种面向对象的设计模式, 包括策略模式.模板方法模式.观察者模 ...
- unity之单例模式
Unity中常见的四种单例 点击进入
- JS高级(摘自简书)
JS高级 1. 访问对象属性(方法也是属性)的通用方式:obj['属性名'] 1. 属性名包含特殊字符,如"-".空格,访问:obj['content-type'] 2. 属性名不 ...