细节与技巧
把设定好的option放入div容器当中,这个div容器需要设定宽高
瀑布图本质上也是柱状图,原理是通过设置stack堆叠来完成的,设置堆叠之后把不用的数据隐藏再调整显示信息即可
绘制堆叠图的时候需要注意,因为代码是从上往下执行,图形是从下往上绘制,所以填在series[{},{}]里越后的字典越在上放
折柱混合图就直接改series中的type即可
echarts的数据集功能不做介绍(不常用),一般是后台传入数据到前端
如果要在一个option中绘制两个或者多个图,需要不同的数据指定不同的x和y轴
function(data){return data}回调函数,data可以替换想要的数据,return返回填入的数据
titlt: {}
设置居中可以使用top: left: right: bottom: 分别是设置距离容器上左右下的距离,可以是像素,可以是百分比
tootip:{}
设置显示数据的类型不是通过type设置,而是trigger: 'axis' or 'item',如果图形没有坐标轴的话axis是无效的
通过设置axisPointer: {type: 'shadow'}来控制鼠标移动到图形上的效果,默认是line, shadow为背景阴影,scross为十字坐标
配置工具在feature:{}中配置
saveAsImage: {title: ""}配置下载图片的工具,加入pixelRatio: 1可以设置保存图片的分辨率
dataZoom: {title: {zoom: '', back: ''}}配置选取和还原的工具
axisPointer:{}
通过设置link:{xAxisIndex:'all'}让所有的x轴使用同一个tooltip
legend:{}
设置data: []属性来设置图例,列表中的字符串需要和series中的name值对应上
orient: ''可以设置图列是的方向是垂直('vertical')还是水平('horizental')
top/bottom/left/right可以控制图例距离容器的距离
xAxis: {}
boundaryGap: true设置坐标轴两边是否留白,默认true
splitLine: false设置x轴的分割线,默认不显示
可以使用gridIndex:1来选择grid设置的位置来控制x轴的位置
scale: true可以设置当图标放大时,x的最大值与最小值会自动适应(当x轴是value时有效)
yAxis:{}
min与max可以限定y轴数值的范围
scale: true可以设置当图标放大时,y的最大值与最小值会自动适应
可以使用gridIndex:1来选择grid设置的位置来控制y轴的位置
grid:[{}]
top,bottom,left,right可以设置图标离容器边框的距离
dataZoom:[{type:'inside'},{type:'slider'}]
可以给x轴设置一个可以拖动放大查看数据的手柄,有滚轮和手柄两种类型,如果要设置两种都启动的话加上xAixPointer:[0,1]即可
visualMap:
视觉映射组件,就是图例,图中的颜色对应图例中的数值,piecewise为分段型,continuous为连续型
(分段型)pieces:[{min: "", max: "",label:""}]设置每一段的最大值与最小值的范围及文字
(分段型)splitNmber设置分段的数量
(连续型)calculable设置是否显示拖拽用的手柄,realtime(默认true)设置拖拽是否实时更新数据
seriesIndex:1可以控制选择哪一个图表的数据来设置数值对应的颜色
demension:2可以根据seriesIndex选择的数据(二维数据)来选择具体是用哪个值来确认颜色
radar:
雷达图专用的配置,需要配合使用
shape:'cricle'可以控制这个雷达图是什么形状的,有多边形和圆形两种
indicator:[{}]控制这个雷达有几个方向,填入了几个字典就是几个方向,字典中需要填入nane和max两个值
series:[{type: 'bar'}]
可以通过设置emphasis:{focus: 'series'}来设置焦点效果(鼠标移动到该图的时候其他图形淡化)
设置label:{show: true}显示设置数据的数值,同时也能通过position来设置显示的位置
itemStyle:{}设置柱子的样式,color: 'rgbs(0,0,0,0)'可以设置图形隐藏起来,也可以通过opacity: 0来设置不绘制该图形
series:[{type: 'pie'}]
在字典中添加roseType: 'area'可以使饼图变为玫瑰图
把饼图看成一个圆环,有内圆和外圆Radius:['10%','50%']可以设置内圆和外圆的半径,可以变成一个圆环
itemStyle:{borderRadius: 8}可以设置每个扇区的圆角弧度
通过设置emphasis:{label: {show: true}}可以设置鼠标移动到图形上才会显示信息的效果,前提是外层的label设置为false
因为饼图自带name的特性,所以不需要额外再设置name,显示图例只需要添加配置legend:{}即可
center: ["",""]可以设置饼图在容器当中的位置
饼图的data数据格式为[{naem: "", value: 12}],每一个字典表示一个扇区
series:[{type: 'scatter'}]
散点图设置虽然有x轴和y轴,但并不需要为xAxis与yAxis设置type属性
symbolSize可以控制每一个点的大小
series: [{type: 'map'}]
使用地图前需要先使用echarts.registerMap(<name>, json地图数据)来注册地图
[{type: 'map', map: '<name>'}]来绘制地图,前提是这个name是已经注册了的地图
如果需要给地图上色就加入data:[{name:'地图区块的名字', value:值}],然后在visualMap中的color来设置对应的颜色
可以使用nameMap:{"key", "value"}来设置映射名称
series: [{type: 'k'}]
k线图实际的属性是'candlestick',从echarts3开始直接填K就可以了
k线图的data需要有4个值[开盘值,关盘值,最低值,最高值, 其他值]
k线图也需要x轴与y轴,一般x轴为日期
series: [{type:'boxplot'}]
箱线图有上限、上分值、中位数、下分值、下限,echarts直接传入多组数据只会根据每一组数据的前5个来画图,并不会帮我们计算值
需要使用echarts.dataTool.prepareBoxplotData()来计算,需要引入dataTool.js文件
顺便一提,prepareBoxplotData()返回的是一个对象,有三个值,axisData(索引),baxData(max,Q1,Q2,Q3,min),outliers(异常值)
也可以通过echarts5后自带的数据转换功能来完成,这里不做介绍
series: [{type: 'radar'}]
雷达图,需要与radar:[{indicator:[{name:'', max:''}]}]配合使用
data中填入的是每一个方向的值,取多少个值取决于radar中设置了几个方向
series: [{type: 'heatmap'}]
热力图,data中填入的列表为3个数值,前两个为在坐标轴中的坐标,后一个为热力值,可以有其他值,但是只能取到前3个值
热力值对应的颜色需要靠visualMap来设置,所以这两个配置是绑定的
热力图的x与y轴必须都是类目轴(category),不然会报错
series: [{type: 'graph'}]
关系图,data的数据格式为[{},{}],每一个字典是一个点,配置name和value,name是唯一的
需要指定coordinateSymbol的值来设置关系在哪一种图中应用,有catesian2d(坐标系),porla(极坐标系),geo(地图)
如果没有指定coordinateSymbol,则需要在data中指定x和y的值
edgeSymbol:['circle', 'arrow']指定关系线两端的样式,circle(圆形), arrow(三角形), none(无)
series: [{type: 'funnel'}]
data的数据格式为[{},{},{}],一个字典为一个漏斗, gap可以配置每个漏斗之间的间隔
series:[{type: 'gauge'}]
data的数据格式为[{},{},{}],一个字典为一根指针
max可以设置仪表盘的最大值
progress: {show: true}可以显示仪表盘外层的颜色