echarts 自定义图表custom

1、配置seriesdata: [维度0  维度1  维度2  维度3[   12,   44,   55,   60   ],     这是第一个 dataItem[   53,   31,   21,   56   ],     这是第二个 dataItem[   71,   33,   10,   20   ],     这是第三个 dataItem...]series:[{type:'custom',renderItem: function (params, api) {(1)params包含了当前数据信息和坐标系的信息。context: // {Object} 一个可供开发者暂存东西的对象。生命周期只为：当前次的渲染。seriesId: // {string} 本系列 id。seriesName: // {string} 本系列 name。seriesIndex: // {number} 本系列 index。dataIndex: // {number} 数据项的 index。dataIndexInside: // {number} 数据项在当前坐标系中可见的数据的 index（即 dataZoom 当前窗口中的数据的 index）。dataInsideLength: // {number} 当前坐标系中可见的数据长度（即 dataZoom 当前窗口中的数据数量）。actionType: // {string} 触发此次重绘的 action 的 type。coordSys: // 不同的坐标系中，coordSys 里的信息不一样，含有如下这些可能：coordSys: {type: 'cartesian2d',x: // {number} grid rect 的 xy: // {number} grid rect 的 ywidth: // {number} grid rect 的 widthheight: // {number} grid rect 的 height},coordSys: {type: 'calendar',x: // {number} calendar rect 的 xy: // {number} calendar rect 的 ywidth: // {number} calendar rect 的 widthheight: // {number} calendar rect 的 heightcellWidth: // {number} calendar cellWidthcellHeight: // {number} calendar cellHeightrangeInfo: {start: // calendar 日期开端end: // calendar 日期结尾weeks: // calendar 周数dayCount: // calendar 日数}},coordSys: {type: 'geo',x: // {number} geo rect 的 xy: // {number} geo rect 的 ywidth: // {number} geo rect 的 widthheight: // {number} geo rect 的 heightzoom: // {number} 缩放的比率。如果没有缩放，则值为 1。例如 0.5 表示缩小了一半。},coordSys: {type: 'polar',cx: // {number} polar 的中心坐标cy: // {number} polar 的中心坐标r: // {number} polar 的外半径r0: // {number} polar 的内半径},coordSys: {type: 'singleAxis',x: // {number} singleAxis rect 的 xy: // {number} singleAxis rect 的 ywidth: // {number} singleAxis rect 的 widthheight: // {number} singleAxis rect 的 height}(2)api开发者可调用的方法集合api.value()，意思是取出dataItem中的数值,api.value(0)表示取出当前 dataItem 中第一个维度的数值。api.coord()，意思是进行坐标转换计算,var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的数值转换成坐标系上的点。api.size()     意思是得到坐标系上一段数值范围对应的长度,api.size([2, 4])返回[12.4, 55],表示x轴数据范围为2映射得到长度是12.4,y轴数据范围为4时得到长度为55api.style()  意思是得到series.itemStyle中定义的样式信息,以及视觉映射的样式信息,也可以用这种方式覆盖这些样式信息:api.style({fill: 'green', stroke: 'yellow'})api.barLayout()    意思是得到柱状的布局信息或覆盖api.barLayout({barGap: '30%'})api.visual() 得到视觉映射的样式信息, api.visual('color')...},data,encode:{},...}]2、根据renderItem返回的内容绘制自定义图表renderItem(params,api){(1)从dataItem中得到需要的数据api.value(n)...(2)根据数据转换成坐标系中的坐标点api.coord([x,y])(3)根据数据获得一些坐标系中的长度api.size([2, 4])返回[12.4, 55],    表示x轴数据索引为2映射得到长度是12.4,y轴数据索引为4时得到长度为55(4)根据选择的图表,进行图表的样式定制var style = api.style({...});(4)根据获取到的坐标等信息进行图表的绘制1.单独一个图形return {   type: 'rect',shape: {x: x, y: y, width: width, height: height},style: api.style()}2.一组图形元素return {type: 'group',children: [{type: 'circle',shape: {cx: cx, cy: cy, r: r},style: api.style()}, {type: 'line',shape: {x1: x1, y1: y1, x2: x2, y2: y2},style: api.style()}]}(5)绘制过程会根据变量data的每一项,然后每一项数据通过renderItem来进行渲染成图像}

效果图:

代码示例:
图一:

var categoryData = [];
var errorData = [];
var barData = [];
var dataCount = 100;
for (var i = 0; i < dataCount; i++) {var val = Math.random() * 1000;categoryData.push('category' + i);errorData.push([i,echarts.number.round(Math.max(0, val - Math.random() * 100)),echarts.number.round(val + Math.random() * 80)]);barData.push(echarts.number.round(val, 2));
}//自定义图表errorData数据格式
//0: (3) [0, 605.1815292057, 679.8030379497]
//1: (3) [1, 920.7723004698, 962.3312395196]
//2: (3) [2, 149.3935443747, 171.9616042264]
//3: (3) [3, 165.3770327076, 215.6546992705]
//4: (3) [4, 689.381740467, 802.6794791582]function renderItem(params, api) {var xValue = api.value(0);            var lowPoint = api.coord([xValue, api.value(1)]);  //得到下面线的中心坐标var highPoint = api.coord([xValue, api.value(2)]); //得到上面线的中心坐标var halfWidth = api.size([1, 0])[0] * 0.1;         //根据x轴索引为1的数值得到所在的映射宽度*0.1var style = api.style({stroke: api.visual('color'),fill: null});return {type: 'group',       //上面那条线children: [{type: 'line',transition: ['shape'],shape: {x1: highPoint[0] - halfWidth, y1: highPoint[1],x2: highPoint[0] + halfWidth, y2: highPoint[1]},style: style}, {            //中间垂直线type: 'line',transition: ['shape'],shape: {x1: highPoint[0], y1: highPoint[1],x2: lowPoint[0], y2: lowPoint[1]},style: style}, {           //下面那条线type: 'line',transition: ['shape'],shape: {x1: lowPoint[0] - halfWidth, y1: lowPoint[1],x2: lowPoint[0] + halfWidth, y2: lowPoint[1]},style: style}]};
}option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},title: {text: 'Error bar chart'},legend: {data: ['bar', 'error']},dataZoom: [{type: 'slider',start: 50,end: 70}, {type: 'inside',start: 50,end: 70}],xAxis: {data: categoryData},yAxis: {},series: [{type: 'bar',name: 'bar',data: barData,itemStyle: {color: '#77bef7'}}, {type: 'custom',name: 'error',itemStyle: {normal: {borderWidth: 1.5}},renderItem: renderItem,encode: {x: 0,y: [1, 2]},data: errorData,z: 100}]
};

图二:

var data = [[10, 16, 3, 'A'], [16, 18, 15, 'B'], [18, 26, 12, 'C'], [26, 32, 22, 'D'], [32, 56, 7, 'E'], [56, 62, 17, 'F']];
var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b'];data = data.map(function (item, index) {return {value: item,itemStyle: {color: colorList[index]}};
});function renderItem(params, api) {var yValue = api.value(2);                    //第三项数据为y轴数值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],y: start[1],width: size[0],height: size[1]},style: style};
}option = {title: {text: 'Profit',left: 'center'},tooltip: {},xAxis: {scale: true},yAxis: {},series: [{type: 'custom',renderItem: renderItem,label: {show: true,position: 'top'},dimensions: ['from', 'to', 'profit'],encode: {x: [0, 1],y: 2,tooltip: [0, 1, 2],        //映射到提示框中的维度itemName: 3},data: data}]
};

echarts 自定义图表custom相关推荐

echarts自定义图表颜色，柱状图/饼图自定义渐变色
echarts自定义图表颜色,自定义渐变色柱状图: 单色: 原先图表的颜色配置代码: series: {type: "bar",barWidth: "60" ...
echarts 自定义图表
2019独角兽企业重金招聘Python工程师标准>>> 首先附上实现效果,被分了段的柱状图幸亏了公司的设计师出的难题,不然我也不会去捣鼓这个东西的这个图表的类型是 pictori ...
echarts 自定义图表的那些事
随着信息时代的快速发展,枯燥的文本数据再也不能满足我们快速直观的对数据进行观测,比对分析.于是乎,数据可视化技术应运而生,当前的主流可视化技术如同雨后春笋一般,层出不穷.最为著名的当属(echarts ...
用Echarts自定义多系列左右双坐标对比的图表，适合展示TGI对比等场景
用Echarts自定义多系列左右双坐标对比的图表,适合展示TGI对比等场景. renderItem = function (params, api) {console.log('----------- ...
java中点击按钮出现echarts图表_echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮...
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
使用echarts（二）自定义图表折线图
自定义图表折线图样式如下代码如下 ```html Document ``` 详细参数说明: https://www.w3cschool.cn/echarts_tutorial/
knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示三.require的 ...
Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
echarts 实现图表缩放功能 dataZoom自带属性实现
echarts 实现图表缩放功能亲测有效,dataZoom自带属性实现图表数据过多展示起来密密麻麻看不到细节,需要实现缩放这确实是实现了缩放,但是需求是标尺进行缩放,我们可以添加如下属性图表数 ...
【泛微系统】OA系统集成echart插件，自定义图表demo实例
OA系统集成echart插件,自定义图表demo实例前言在公司有时候需要做一些自定义报表,因为系统自带的报表工具很low,这时候可以使用echart插件: 第一步:下载相关jar包首先下载一下m ...

echarts 自定义图表custom

echarts 自定义图表custom相关推荐

最新文章

热门文章