网站地址申请,京东联盟怎么做网站,wordpress pods使用,厦门建站程序效果图 主要注意点#xff1a; 1、右上角图例visualMap实现 2、visualMap增加formatter 3、series使用custom自定义图表#xff0c;encode解析四维数组。核心是renderItem方法#xff0c;必填项#xff0c;且需要注意要全部定义在options里面#xff01;#xff01;…效果图 主要注意点 1、右上角图例visualMap实现 2、visualMap增加formatter 3、series使用custom自定义图表encode解析四维数组。核心是renderItem方法必填项且需要注意要全部定义在options里面定义在外面options只留方法名的话虽然echarts示例中可以粘贴运行但是一旦移植到项目中无法正常渲染param和api传递会有问题。项目中要写成renderItem:(params, api) {全抄过来}
下面两种示例echarts中粘贴即可运行
动态数据版
var data [];
var dataCount 3;
var startTime new Date();
var categories [服务器调试, app流程界面, 安卓程序编码,ios程序编码];
var types [{ name: 项目1, color: #7b9ce1 },{ name: 项目2, color: #bd6d6c },{ name: 项目3, color: #75d874 },{ name: 项目4, color: #e0bc78 }
];
// Generate mock data
categories.forEach(function (category, index) {var baseTime startTime;for (var i 0; i dataCount; i) {var typeItem types[Math.round(Math.random() * (types.length - 1))];var duration Math.round(Math.random() * 10000);data.push({name: typeItem.name,value: [index, baseTime, (baseTime duration), duration],itemStyle: {normal: {color: typeItem.color}}});baseTime Math.round(Math.random() * 2000);}
})// 项目中使用时renderItem要挪到options里面
function renderItem(params, api) {var categoryIndex api.value(0);var start api.coord([api.value(1), categoryIndex]);var end api.coord([api.value(2), categoryIndex]);var height api.size([0, 1])[1] * 0.6;var rectShape echarts.graphic.clipRectByRect({x: start[0],y: start[1] - height / 2,width: end[0] - start[0],height: height},{x: params.coordSys.x,y: params.coordSys.y,width: params.coordSys.width,height: params.coordSys.height});return (rectShape {type: rect,transition: [shape],shape: rectShape,style: api.style()});
}option {visualMap:{ // 视觉映射type: piecewise, // continuous连续型piecewise分段型。splitNumber: 4, // 数据分割几份left: right, // 位置top: 0, // 边距orient: horizontal, // 布局朝向 horizontal横向vertical纵向// text:[High, Low], // 两端文本min: 0, // 最小区间值max: 200, // 最大区间值itemHeight: 10,itemWidth: 10,align: left, // 图例位置inverse: true, // 控制视觉映射组件的排列方向, 当设置为true时会使视觉映射组件的排列方向颠倒即最小值显示在最右边最大值显示在最左边。pieces: [ // 使用 pieces 属性来精确定义每个分段的取值范围和颜色{ min: 0, max: 19, label: 项目1, color: #7b9ce1 },{ min: 20, max: 39, label: 项目2, color: #bd6d6c },{ min: 40, max: 69, label: 项目3, color: #75d874 },{ min: 60, max: 89, label: 项目4, color: #e0bc78 },] }, tooltip: {formatter: function (params) {let str ${params.marker params.name}br/start${params.value[1]}br/end${params.value[2]}br/value${params.value[3]}br/return str}},title: {show: true,text: 图表标题,subtext: ,left: 5%,top: 5%,textStyle: {fontSize: 14,height: 40},subtextStyle: {fontSize: 10}},dataZoom: [{type: slider,filterMode: weakFilter,showDataShadow: false,top: 400,labelFormatter: },{type: inside,filterMode: weakFilter}],grid: {top: 10%,bottom: 15%,left: 15%,right: 10%},xAxis: {min: startTime,scale: true,axisLabel: {formatter: function (val) {return Math.max(0, val - startTime) ms;}}},yAxis: {data: categories,axisTick: { show: false },splitLine: { show: false },axisLine: { show: false },},series: [{type: custom,// 注意项目使用中要写成renderItem:(params, api) {全抄过来}renderItem: renderItem, itemStyle: {opacity: 0.8},encode: {x: [1, 2],y: 0,},data: data}]
};静态数据版
减去很多配置项,静态data更加直观
function renderItem(params, api) {var categoryIndex api.value(0);var start api.coord([api.value(1), categoryIndex]);var end api.coord([api.value(2), categoryIndex]);var height api.size([0, 1])[1] * 0.6;var rectShape echarts.graphic.clipRectByRect({x: start[0],y: start[1] - height / 2,width: end[0] - start[0],height: height},{x: params.coordSys.x,y: params.coordSys.y,width: params.coordSys.width,height: params.coordSys.height});return (rectShape {type: rect,transition: [shape],shape: rectShape,style: api.style()});
}
option {tooltip: {show: true,trigger: item,},dataZoom: [{type: slider,filterMode: weakFilter,showDataShadow: false,top: 400,labelFormatter: },{type: inside,filterMode: weakFilter}],xAxis: {min: 1723552291842,scale: true,axisLabel: {}},yAxis: {data: [服务器调试,app流程界面,安卓程序编码,ios程序编码],axisTick: {show: false},splitLine: {show: false},axisLine: {show: false}},series: [{type: custom,renderItem: renderItem,itemStyle: {opacity: 0.8},encode: {x: [1,2],y: 0},data: [{name: 项目2,value: [0,1723552291842,1723552297017,5175],itemStyle: {normal: {color: #bd6d6c}}},{name: 项目2,value: [0,1723552298382,1723552300321,1939],itemStyle: {normal: {color: #bd6d6c}}},{name: 项目2,value: [0,1723552300586,1723552304290,3704],itemStyle: {normal: {color: #bd6d6c}}},{name: 项目3,value: [1,1723552291842,1723552295815,3973],itemStyle: {normal: {color: #75d874}}},{name: 项目4,value: [1,1723552296867,1723552298584,1717],itemStyle: {normal: {color: #e0bc78}}},{name: 项目3,value: [1,1723552299537,1723552305343,5806],itemStyle: {normal: {color: #75d874}}},{name: 项目3,value: [2,1723552291842,1723552294548,2706],itemStyle: {normal: {color: #75d874}}},{name: 项目3,value: [2,1723552294711,1723552301769,7058],itemStyle: {normal: {color: #75d874}}},{name: 项目2,value: [2,1723552302106,1723552310635,8529],itemStyle: {normal: {color: #bd6d6c}}},{name: 项目2,value: [3,1723552291842,1723552301649,9807],itemStyle: {normal: {color: #bd6d6c}}},{name: 项目2,value: [3,1723552301795,1723552303283,1488],itemStyle: {normal: {color: #bd6d6c}}},{name: 项目3,value: [3,1723552304712,1723552309047,4335],itemStyle: {normal: {color: #75d874}}}]}]}
