一下不同的图的区别都是体现在相同的series属性下的type上
浮层图
中文可以称为『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』，是一种用作显示一组数据分散情况资料的统计图。它能显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。
默认：['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
图形的混合模式，不同的混合模式见 >
echarts提供多种引入方式，请根据你的项目类型选择合适的方式：
模块化包引入
如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esljs，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。
需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。
//from echarts example
requireconfig({
packages: [
{
name: 'echarts',
location: '//src',
main: 'echarts'
},
{
name: 'zrender',
location: '///zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
});
模块化单文件引入（推荐）
如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。
自218起，我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的，build文件夹下已经包含了由echarts-optimizer生成的单文件：
dist（文件夹） : 经过合并、压缩的单文件
linejs : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
barjs : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
scatterjs : 散点图
kjs : K线图
piejs : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
radarjs : 雷达图
mapjs : 地图
forcejs : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
chordjs : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
funneljs : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
gaugejs : 仪表盘
eventRiverjs : 事件河流图
treemapjs : 矩阵树图
vennjs : 韦恩图
echartsjs : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echartsjs的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试
采用单一文件使用例子见ECharts单一文件引入，存放在example/>//from echarts example
<body>
<div id="main" style="height:400px;"></div>
<script src="/js/echartsjs"></script>
</body>
在主文件引入后你将获得一个AMD环境，配置requireconifg如下：
//from echarts example<body>
<div id="main" style="height:400px;"></div>
<script src="/js/echartsjs"></script>
<script type="text/javascript">
requireconfig({
paths: {
echarts: '/js/dist'
}
});
</script>
</body>
requireconfig配置后就可以通过动态加载使用echarts
//from echarts example<body>
<div id="main" style="height:400px;"></div>
<script src="/js/echartsjs"></script>
<script type="text/javascript">
requireconfig({
paths: {
echarts: '/js/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ecinit(documentgetElementById('main'));
var option = {
}
myChartsetOption(option);
}
);
</script>
</body>
总结来说，模块化单文件引入ECharts，你需要如下4步：
为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
通过script标签引入echarts主文件
为模块加载器配置echarts的路径，从当前页面链接到echartsjs所在目录，见上述说明
动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts')init(dom)就行）
详见入门教程 ( Getting started ) »
标签式单文件引入
自135开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echartsconfig = require('echarts/config')， zrendertoolcolor = require('zrender/tool/color')
//from echarts example<body>
<div id="main" style="height:400px;"></div>
<script src="example/;
<script>
var myChart = echartsinit(documentgetElementById('main'));
var option = {
}
myChartsetOption(option);
</script>
</body>
我是这么写的，你可以试试行不行
optionseriespush({
name: '倒送电量',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
label: {
show: true,
position: 'top'
}
}
},
data: dsdl
});
myChartsetOption(option);
formatter:function(value){ return valuesubstring(0,2); } 这里只是个例子，返回一个截取字符串 也可以返回其他内容，比如 拼接标签等
思路：取出所有数据的最大值，如果跟10作比较，比10小，返回10
如果比10大，返回比最大值大的数字，而这个数刚好是10的倍数，这样柱状图比较美观。
方法中传入数组即可，嵌套很深的数组都可以取出最大值
TypeScript
使用
或者是这样
普通的js环境
使用方法同上
以上就是关于Echarts配置项全部的内容，包括:Echarts配置项、echarts 怎样用js自定义图表数据、ECharts怎么动态生成series等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）