网站的栏目有什么名字,济南疾控最新发布,专业网站建设公司首选,网络培训的优点包括目录
一.柱状图
1.基本柱状图 1.1最简单的柱状图
编辑 1.2多系列柱状图 1.3柱状图的样式 #xff08;1#xff09;柱条样式 #xff08;2#xff09;柱条的宽度和高度 #xff08;3#xff09;柱条间距 #xff08;4#xff09;为柱条添加背景颜色
编辑
2.堆…目录
一.柱状图
1.基本柱状图 1.1最简单的柱状图
编辑 1.2多系列柱状图 1.3柱状图的样式 1柱条样式 2柱条的宽度和高度 3柱条间距 4为柱条添加背景颜色
编辑
2.堆叠柱状图
3.动态排序柱状图
4.阶梯瀑布图
二.折线线图
1.基础折线图
1.1最基础的折线图
1.2笛卡尔坐标系中的折线图
1.3折线图样式设置
折线的样式
数据点的样式
1.4在数据点处显示数值
1.5空数据
2.堆叠折线图
3.区域面积图
4.平滑曲线图
5.阶梯线图
三.饼图
1.基础饼图
编辑
2.圆环图
1.在圆环图中间显示高亮扇形对应的文字
3.南丁格尔图玫瑰图
四.散点图
基础散点图 1.最简单的散点图 2.笛卡尔坐标系下的散点图 3.散点图样式设置
图形的形状
图形的大小 内容有点长建议先收藏
一.柱状图 柱状图是通过条形长度来表现数据大小的一种图表柱状图的设置是将series里的type设置为bar
1.基本柱状图 1.1最简单的柱状图
设置好type即可
script typetext/javascript// 因为该demo会经常更该所以要销毁前一个图表echarts.init(document.getElementById(div)).dispose();//定义var myChart echarts.init(document.getElementById(div));var option {xAxis:{data: [星期一,星期二,星期三,星期四,星期五,星期六,星期天]},yAxis:{},series :[{type:bar,data:[12,31,67,32,13,42,36,]}]}myChart.setOption(option);/script 1.2多系列柱状图 但我们在series系列中设置多个type为bar时就有多个柱状图
var option {xAxis:{data: [星期一,星期二,星期三,星期四,星期五,星期六,星期天]},yAxis:{},series :[{type:bar,data:[12,31,67,32,13,42,36,]},{type:bar,data:[23,15,67,34,17,53,41]}]} 1.3柱状图的样式 1柱条样式
柱条的样式可以通过 series.itemStyle 设置包括
柱条的颜色color柱条的描边颜色borderColor、宽度borderWidth、样式borderType柱条圆角的半径barBorderRadius柱条透明度opacity阴影shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY。series :[//单个数据设置柱状样式{type:bar,data:[12,31,67,{value :34,itemStyle:{color: green,borderColor: backer,opacity: 0.6}},13,42,36,]},//全局设置柱状样式{type:bar,data:[23,15,67,34,17,53,41],itemStyle:{color:#91cc3,borderColor:red,borderType:dashsed,opacity:0.5}}] 2柱条的宽度和高度
柱条的宽度用barwidth表示barwidth20%表示柱每个条宽度占类目的20%高度用barheght表示方法和宽度一样 3柱条间距
柱条间距分为两种一种是不同系列在同一类目下的距离 barGap另一种是类目与类目的距离 barCategoryGap。
type:bar,data:[12,31,67,34,13,42,36,],barGap:20%,barCategoryGap:40%
例如上面barGap‘20%’表示不同系列在同一类目下柱条间距占类目的20%而barCategroyGap‘40%’表示每个类目右侧的柱条空间占类目的40% 4为柱条添加背景颜色 添加背景图片可以简单地用showBackground开启并且可以通过 backgroundStyle配置。 series :[//单个数据设置柱状样式{type:bar,data:[12,31,67,34,13,42,36,],barGap:20%,barCategoryGap:40%,//背景颜色设置showBackground:true,backgroundstyle:{color: rgba(220,220,220,0.8)}},//全局设置柱状样式{type:bar,data:[23,15,67,34,17,53,41],itemStyle:{color:#91cc3,borderColor:red,borderType:dashsed,opacity:0.5}}] 2.堆叠柱状图 堆叠柱状图不仅可以表现不同系列的值还可以表现它们之和的变化堆叠柱状图的设置很简单只要在一个系列中用stack且设置堆叠的参数就可以实现多个具有相同stack参数的系列进行堆叠
series :[//单个数据设置柱状样式{type:bar,data:[12,31,67,34,13,42,36,],barGap:20%,barCategoryGap:40%,//背景颜色设置showBackground:true,backgroundstyle:{color: rgba(220,220,220,0.8)},stack:x,},//全局设置柱状样式{type:bar,stack: x,data:[23,15,67,34,17,53,41],itemStyle:{color:#91cc3,borderColor:red,borderType:dashsed,opacity:0.5}}] 3.动态排序柱状图
柱状图系列的 realtimeSort 设为 true表示开启该系列的动态排序效果yAxis.inverse 设为 true表示 Y 轴从下往上是从小到大的排列yAxis.animationDuration 建议设为 300表示第一次柱条排序动画的时长yAxis.animationDurationUpdate 建议设为 300表示第一次后柱条排序动画的时长如果想只显示前 n 名将 yAxis.max 设为 n - 1否则显示所有柱条xAxis.max 建议设为 dataMax 表示用数据的最大值作为 X 轴最大值视觉效果更好如果想要实时改变标签需要将 series.label.valueAnimation 设为 trueanimationDuration 设为 0表示第一份数据不需要从 0 开始动画如果希望从 0 开始则设为和 animationDurationUpdate 相同的值animationDurationUpdate 建议设为 3000 表示每次更新动画时长这一数值应与调用 setOption 改变数据的频率相同以 animationDurationUpdate 的频率调用 setInterval更新数据值显示下一个时间点对应的柱条排序
var data [];
for (let i 0; i 5; i) {data.push(Math.round(Math.random() * 200));
}option {xAxis: {max: dataMax},yAxis: {type: category,data: [A, B, C, D, E],inverse: true,animationDuration: 300,animationDurationUpdate: 300,max: 2 // only the largest 3 bars will be displayed},series: [{realtimeSort: true,name: X,type: bar,data: data,label: {show: true,position: right,valueAnimation: true}}],legend: {show: true},animationDuration: 3000,animationDurationUpdate: 3000,animationEasing: linear,animationEasingUpdate: linear
};function update() {var data option.series[0].data;for (var i 0; i data.length; i) {if (Math.random() 0.9) {data[i] Math.round(Math.random() * 2000);} else {data[i] Math.round(Math.random() * 200);}}myChart.setOption(option);
}setInterval(function() {update();
}, 3000); 动态图
4.阶梯瀑布图 我们可以使用堆叠的柱状图模拟该效果
假设数据数组中的值是表示对前一个值的增减
var data [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
也就是第一个数据是 900第二个数据 345 表示的是在 900 的基础上增加了 345……将这个数据展示为阶梯瀑布图时我们可以使用三个系列第一个是不可交互的透明系列用来实现“悬空”的柱状图效果第二个系列用来表示正数第三个系列用来表示负数。
var data [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
var help [];
var positive [];
var negative [];
for (var i 0, sum 0; i data.length; i) {if (data[i] 0) {positive.push(data[i]);negative.push(-);} else {positive.push(-);negative.push(-data[i]);}if (i 0) {help.push(0);} else {sum data[i - 1];if (data[i] 0) {help.push(sum data[i]);} else {help.push(sum);}}
}option {title: {text: Waterfall},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},xAxis: {type: category,splitLine: { show: false },data: (function() {var list [];for (var i 1; i 11; i) {list.push(Oct/ i);}return list;})()},yAxis: {type: value},series: [{type: bar,stack: all,itemStyle: {normal: {barBorderColor: rgba(0,0,0,0),color: rgba(0,0,0,0)},emphasis: {barBorderColor: rgba(0,0,0,0),color: rgba(0,0,0,0)}},data: help},{name: positive,type: bar,stack: all,data: positive},{name: negative,type: bar,stack: all,data: negative,itemStyle: {color: #f33}}]
}; 二.折线线图
1.基础折线图
1.1最基础的折线图 折线的实现方式为横坐标设置为category纵坐标设置为value同时series的type为line
option{xAxis:{type:category,data:[A,B,C,D],},yAxis:{type: value,},series:{type:line,data: [23,42,11,28,32],},} 1.2笛卡尔坐标系中的折线图
如果我们希望折线图在横坐标和纵坐标上都是连续的即在笛卡尔坐标系中应该如何实现呢答案也很简单只要把 series 的 data 每个数据用一个包含两个元素的数组表示就行了。 option{xAxis:{},yAxis:{},series:{type:line,data: [[10,10],[30,30],[60,10],[90,30],[120,10]],},} 1.3折线图样式设置
折线的样式
折线图中折线的样式可以通过 lineStyle 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等。这里我们以设置颜色color、线宽width和折线类型type为例说明。
type参数
solid 实线dashed 点圆线dotted 点方线
option {xAxis: {data: [A, B, C, D, E]},yAxis: {},series: [{data: [10, 22, 28, 23, 19],type: line,lineStyle: {normal: {color: green,width: 4,type: dotted}}}]}; 数据点的样式
数据点的样式可以通过series.itemStyle 指定填充颜色color、描边颜色borderColor、描边宽度borderWidth、描边类型borderType、阴影shadowColor、不透明度opacity等。
1.4在数据点处显示数值
在系列中这数据点的标签通过 series.label 属性指定。如果将 label 下的 show 指定为true则表示该数值默认时就显示如果为 false而 series.emphasis.label.show 为 true则表示只有在鼠标移动到该数据时才显示数值。
例如鼠标移动时显示值 option {xAxis: {data: [A, B, C, D, E]},yAxis: {},series: [{data: [10, 22, 28, 23, 19],type: line,emphasis:{label:{show:true,}}}]};
又例如显示数值图
option {xAxis: {data: [A, B, C, D, E]},yAxis: {},series: [{data: [10, 22, 28, 23, 19],type: line,label:{show:true,}}]}; 1.5空数据 我们使用字符串 - 表示空数据这对其他系列的数据也是适用的
option {xAxis: {data: [A, B, C, D, E]},yAxis: {},series: [{data: [10, 22, -, 23, 19],type: line,label:{show:true,}}]}; 2.堆叠折线图 堆叠折线图也是用系列的 stack 设置哪些系列堆叠在一起
option {xAxis: {data: [A, B, C, D, E]},yAxis: {},series: [{data: [10, 22, 33, 23, 19],type: line,stack:x},{data:[23,32,44,32,37],type:line,stack: x}]}; 但是不同的是如果不加说明的话我们很难判断出这是一个堆叠折线图还是一个普通的折线图。所以对于堆叠折线图而言一般建议使用区域填充色以表明堆叠的情况。 option {xAxis: {data: [A, B, C, D, E]},yAxis: {},series: [{data: [10, 22, 33, 23, 19],type: line,stack:x,areaStyle:{}},{data:[23,32,44,32,37],type:line,stack: x,areaStyle: {}}]}; 3.区域面积图 区域面积图将折线到坐标轴的空间设置背景色用区域面积表达数据。
option {xAxis: {type:category,data: [A, B, C, D, E]},yAxis: {type:value},series: [{data: [10, 22, 28, 23, 19],type: line,label:{show:true},areaStyle:{}},{data:[25, 14, 23, 35, 10],type:line,label: {show:true},areaStyle: {color:#232323,opacity:0.5}}]}; 4.平滑曲线图 使用时只需要将折线图系列的 smooth 属性设置为 true 即可。 option {xAxis: {type:category,data: [A, B, C, D, E]},yAxis: {type:value},series: [{data: [10, 22, 28, 23, 19],type: line,label:{show:true},smooth:true,areaStyle:{}},]}; 5.阶梯线图 系列的 step 属性用来表征阶梯线图的连接类型它共有三种取值start、middle 和 end分别表示在当前点当前点与下个点的中间点下个点拐弯。
option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{name: Step Start,type: line,step: start,data: [120, 132, 101, 134, 90, 230, 210]},{name: Step Middle,type: line,step: middle,data: [220, 282, 201, 234, 290, 430, 410]},{name: Step End,type: line,step: end,data: [450, 432, 401, 454, 590, 530, 510]}]
}; 三.饼图 饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例
1.基础饼图 饼图的配置和折线图、柱状图略有不同不再需要配置坐标轴而是把数据名称和值都写在系列中 option {series:[{type:pie,data:[{value:34,name:星期一},{value:26,name:星期二},{value:19,name:星期三},],}],}; 数据为0的饼图 在默认情况下如果数据值和为 0会显示平均分割的扇形。比如如果有 4 个数据项并且每个数据项都是 0则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形可以将 series.stillShowZeroSum 设为 false。
如果希望扇形对应的标签也不显示可以将 series.label.show 设为 false。
2.圆环图 圆环图同样可以用来表示数据占总体的比例相比于饼图它中间空余的部分可以用来显示一些额外的文字等信息因而也是一种常用的图表类型。设置圆环图时只要在series设置radius即可形式为series[%,%],前一个百分比表示镂空的部分后一个百分比表示整体大小 option {series:[{type:pie,data:[{value:34,name:星期一},{value:26,name:星期二},{value:19,name:星期三},],radius:[40%,70%],}],}; 如果半径是数组其中的两项也可以一项是数值另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下内半径小于外半径。ECharts 会自动使用小的一项作为内半径但是仍应小心这样可能会导致的非预期效果。
1.在圆环图中间显示高亮扇形对应的文字
option {legend: {orient: vertical,x: left,data: [A, B, C, D, E]},series: [{type: pie,radius: [50%, 70%],avoidLabelOverlap: false,label: {show: false,position: center},labelLine: {show: false},emphasis: {label: {show: true,fontSize: 30,fontWeight: bold}},data: [{ value: 335, name: A },{ value: 310, name: B },{ value: 234, name: C },{ value: 135, name: D },{ value: 1548, name: E }]}]
}; 其中avoidLabelOverlap 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 true而在这里我们不希望标签位置调整到不是中间的位置因此我们需要将其设为 false。
这样圆环图中间会显示高亮数据的 name 值。
3.南丁格尔图玫瑰图 南丁格尔图又称玫瑰图通常用弧度相同但半径不同的扇形表示各个类目。
ECharts 可以通过将饼图的 series.roseType 值设为 area 实现南丁格尔图其他配置项和饼图是相同的。
option {series: [{type: pie,data: [{value: 100,name: A},{value: 200,name: B},{value: 300,name: C},{value: 400,name: D},{value: 500,name: E}],roseType: area}]
}; 四.散点图 散点图也是一种常见的图表类型。散点图由许多“点”组成有时这些点用来表示数据在坐标系中的位置比如在笛卡尔坐标系下表示数据在 x 轴和 y 轴上的坐标在地图坐标系下表示数据在地图上的某个位置等有时这些点的大小、颜色等属性也可以映射到数据值用以表现高维数据。
基础散点图 1.最简单的散点图
下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置
option {xAxis: {data: [Sun, Mon, Tue, Wed, Thu, Fri, Sat]},yAxis: {},series: [{type: scatter,data: [220, 182, 191, 234, 290, 330, 310]}]
}; 2.笛卡尔坐标系下的散点图
数据的横坐标和纵坐标一同写在 data 中即可
option {xAxis: {},yAxis: {},series: [{type: scatter,data: [[10, 5],[0, 8],[6, 10],[2, 12],[8, 9]]}]
}; 3.散点图样式设置
图形的形状
图形symbol指的是散点图中数据“点”的形状。有三类图形可选一种是 ECharts 内置形状第二种是图片第三种是 SVG 的路径。
ECharts 内置形状包括圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形分别对应circle、rect、roundRect、triangle、diamond、pin、arrow。使用内置形状时只要将 symbol 属性指定为形状名称对应的字符串即可。
如果想要将图形指定为任意的图片以 image:// 开头后面跟图片的绝对或相对地址。形如image://http://example.com/xxx.png 或 image://./xxx.png。
除此之外还支持 SVG 的路径作为矢量图形将 symbol 设置为以 path:// 开头的 SVG 路径即可。使用矢量图形的好处是图片不会因为缩放而产生锯齿或模糊并且通常而言比图片形式的文件大小更小。路径的查看方法为打开一个 SVG 文件找到形如 path dM… L…/path 的路径将 d 的值添加在 path:// 后即可。
下面我们展示一个将图形设置为矢量爱心形状的方式。
首先我们需要一个爱心的 SVG 文件可以使用矢量编辑软件绘制或者从网上下载到相关资源。其内容如下
?xml version1.0 encodingiso-8859-1?
svg version1.1 xmlnshttp://www.w3.org/2000/svg xmlns:xlinkhttp://www.w3.org/1999/xlink x0px y0px viewBox0 0 51.997 51.997 styleenable-background:new 0 0 51.997 51.997; xml:spacepreservepath dM51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z/
/svg
option {xAxis: {data: [Sun, Mon, Tue, Wed, Thu, Fri, Sat]},yAxis: {},series: [{type: scatter,data: [220, 182, 191, 234, 290, 330, 310],symbolSize: 20,symbol:path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z}]
}; 图形的大小
图形大小可以使用 series.symbolSize 控制。它既可以是一个表示图形大小的像素值也可以是一个包含两个 number 元素的数组分别表示图形的宽和高。
除此之外它还可以是一个回调函数其参数格式为
(value: Array | number, params: Object) number | Array;
第一个参数为数据值第二个参数是数据项的其他参数。
在下面的例子中我们将散点图点的大小设置为与其数据值成正比
option {xAxis: {data: [Sun, Mon, Tue, Wed, Thu, Fri, Sat]},yAxis: {},series: [{type: scatter,data: [220, 182, 191, 234, 290, 330, 310],symbolSize: function(value) {return value / 10;}}]
};
