Echarts学习笔记一： 柱状图基础 最大最小值 平均值 显示数值 |
您所在的位置：网站首页 › 柱状图怎么求平均数 › Echarts学习笔记一： 柱状图基础 最大最小值 平均值 显示数值 |
Echarts学习笔记一： 柱状图基础 最大最小值 平均值 显示数值
|
Echarts常用图表
看下效果： 全部代码： Echarts尝鲜 let mCharts = echarts.init(document.querySelector('div')) let xDataArr = ['Jing','Dean','Amy','Susan','Rebbeca','Tom'] let yDataArr = [99, 90, 87, 89, 68, 52] let option = { xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, series: [ { name: 'Javascript Grades', type: 'bar', data: yDataArr, markPoint: { data: [ { type: 'max', name: '最大值' }, { type: 'min', name: '最小值' } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] }, label: { show: true, rotate: -30 }, barWidth: '40%' } ] } mCharts.setOption(option)最终效果：
|
先上代码：
再看看其他配置： 
要实现这个效果，只要在series中配置markPoint就可以了，markPoint的值是一个对象，里面有个data属性，它的值是一个数组，里面配置最大值和最小值： 
看看现在的效果： 
再配置一下平均值： 
效果： 
再配置一下数值可见： 
【本文地址】
今日新闻 |
推荐新闻 |