抽奖小程序是什么_echarts统计x轴区间的数值实例代码详解

  • 栏目:公司新闻 时间:2021-01-07 12:39 分享新闻到:
<返回列表

echarts统计x轴区间的数值实例代码详解       这篇文章主要介绍了echarts统计x轴区间的数值,本文给出了实现实例及实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

有时我们需要统计自定义echarts图,统计x轴区间的y轴数量。

思路是利用echarts的自定义配置:option.series[i].type='custom'中的renderItem(params, api)函数进行处理,这里包括了两个参数:params是对应每一个dataItem的数据信息;api是可调用的方法(api.value()和api.coord())。详情可以查看官方文档。

以下是改自官方实例: ,把以下引用 ecStat.js来处理数据的部分修改成自己拼装成需要的格式

var bins = ecStat.histogram(girth);
var min = Infinity;
var max = -Infinity;
edata = echarts.util.map(bins.data, function (item, index) {
 var x0 = bins.bins[index].x0;
 var x1 = bins.bins[index].x1;
 interval = x1 - x0;
 min = Math.min(min, x0); 
 max = Math.max(max, x1);
 return [x0, x1, item[1]];

原因是引用ecStat.js处理数据时,有时出现以下错误,暂时没找到解决方法。

改写后的代码显示效果如下:

 div id="main1" /div 
 script type="text/javascript" 
 $(function(){
 generateChart();
 function generateChart(){
 var myChart1 = echarts.init(document.getElementById('main1'));
 var girth = [19, 26.4, 34, 41.4, 42.4, 42.7, 42.9, 43.1, 43.2, 43.3, 43.3, 43.3, 44.9, 45.4, 46.2, 46.7, 48, 48, 49.1, 54.2];
 //自定义拼装数据方式
 var edata = new Array();
 var scopeMin = 0;
 var scopeMax = 100;
 var interval = (scopeMax-scopeMin)/10;
 var tmin = scopeMin;
 while(tmin scopeMax){
 var x0 = tmin; 
 var x1 = tmin+interval;
 var samplenum = 0;
 for(var i=0;i girth.length;i++){
 if((scopeMin == x0 girth[i] x0) || (x0 = girth[i] x1 girth[i])
 ||(scopeMin == x1 girth[i] x1)) {
 samplenum++; 
 tmin += interval;
 edata.push([x0, x1, samplenum]);
 var option = {
 color: ['rgb(25, 183, 207)'],
 grid: {
 top: 80,
 containLabel: true
 xAxis: [{
 type: 'value',
 min: scopeMin,
 max: scopeMax,
 interval: interval
 yAxis: [{
 type: 'value',
 series: [{
 name: 'height',
 type: 'custom',
 renderItem: renderItem,
 label: {
 normal: {
 show: true,
 position: 'top'
 encode: {
 x: [0, 1],
 y: 2,
 tooltip: 2,
 label: 2
 // data: data
 data: edata
 myChart1.setOption(option);
 window.onresize = function () {
 myChart1.resize();
 function renderItem(params, api) {
 var yValue = api.value(2);
 var start = api.coord([api.value(0), yValue]);
 var size = api.size([api.value(1) - api.value(0), yValue]);
 var style = api.style();
 return {
 type: 'rect',
 shape: {
 x: start[0] + 1,
 y: start[1],
 width: size[0] - 2,
 height: size[1]
 style: style
 /script 

总结

以上所述是小编给大家介绍的echarts统计x轴区间的数值实例代码详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


分享新闻到:

更多阅读

抽奖小程序是什么_echarts统计x轴区间的数

公司新闻 2021-01-07
echarts统计分析x轴区段的标值案例编码详细说明 本文关键详细介绍了echarts统计分析x轴区...
查看全文

网站优化-企业网站建设,微信小程序制作

公司新闻 2021-01-07
商品,根据国际性全新的SaaS(Software as a Service)方式,以技术专业的Saas服务宗旨,致力于于...
查看全文

武汉旅行网站建设-浅析网站应该具有什么

公司新闻 2021-01-07
在网站建站前期就进行全部有利于提升的架构和內容可以减少全部seo优化時间,一个详细的...
查看全文
返回全部新闻


区域站点: 南丰县建站培训   南宫市建站程序   囊谦县凡科建站   南和县企业建站   南华县建站培训   南江县建站程序   南京市凡科建站   南靖县企业建站   南康市建站培训   南乐县建站程序   南陵县凡科建站   南宁市企业建站   南平市建站培训   南皮县建站程序   南市区凡科建站   南通市企业建站   南投县建站培训   南雄市建站程序   南溪县凡科建站   南阳市企业建站   南漳县建站培训   南召县建站程序   南郑县凡科建站   那坡县企业建站   那曲县建站培训   纳雍县建站程序   讷河市凡科建站   内黄县企业建站   内江市建站培训   内丘县建站程序   内乡县凡科建站   嫩江市企业建站   聂荣县建站培训   尼玛县建站程序   尼木县凡科建站   宁安市企业建站   宁波市建站培训   宁城县建站程序   宁德市凡科建站   宁都县企业建站   宁国市建站培训   宁海县建站程序   宁化县凡科建站   宁晋县企业建站   宁陵县建站培训   宁明县建站程序   宁南县凡科建站   宁强县企业建站   宁陕县建站培训   宁武县建站程序   宁乡市凡科建站   宁阳县企业建站   宁远县建站培训   农安县建站程序   磐安县凡科建站   盘锦市企业建站   盘山县建站培训   磐石市建站程序   盘州市凡科建站   蓬安县企业建站   澎湖县建站培训   蓬莱市建站程序   彭山县凡科建站   蓬溪县企业建站   彭阳县建站培训   彭泽县建站程序   彭州市凡科建站   偏关县企业建站   平安县建站培训   平昌县建站程序   平定县凡科建站   屏东县企业建站   平度市建站培训   平果县建站程序   平和县凡科建站   平湖市企业建站   平江县建站培训   平乐县建站程序   平凉市凡科建站   平利县企业建站   平罗县建站培训   平陆县建站程序   屏南县凡科建站   平泉市企业建站   屏山县建站培训   平顺县建站程序   平塘县凡科建站   平潭县企业建站   平武县建站培训   萍乡市建站程序   平乡县凡科建站   平阳县企业建站   平遥县建站培训   平阴县建站程序   平邑县凡科建站   平远县企业建站   平舆县建站培训   皮山县建站程序   普安县凡科建站   浦北县企业建站   浦城县建站培训   普洱市建站程序   普格县凡科建站   浦江县企业建站   普兰县建站培训   普宁市建站程序   莆田市凡科建站   迁安市企业建站   乾安县建站培训   潜江市建站程序   潜山市凡科建站  

友情链接: 医慧互通 创建网站教程 巴渝烤哥 美国免费建站平台 免费网页建站 免费自助建站

Copyright © 2002-2020 凡科建站_企业建站_建站培训_建站程序_自建网站 版权所有 (网站地图) 备案号:粤ICP备10235580号