echarts四象限图加图例

基于社区内图表的改动，以下是原图：

下边是改动后,添加了图例，区域缩放功能可以根据个人需求修改。

代码如下：

var xiaoLv2_color = ['#CC9999','#8BBA00','#FF8E46','#90CECE','#DB5D5D','#AFD8F8','#FDC689','#6DCFF6','#C0B73F','#CC99FF']var xiaoLv2_name = ['a','b','c','d','f']var xiaoLv2_value = [[0.2,0.3],[1.2,0.5],[1.4,0.5],[1.5,1.5]]var o_data = [{type: 'scatter',markLine: {label: {normal: {}},lineStyle: {normal: {color: "#666",type: 'solid',width: 0.5,},},data: [{label:{show:false},xAxis:1,name: '费用消耗指数平均线',itemStyle: {normal: {color: "#000",}}}, {label:{show:false},yAxis: 1,name: '时间消耗指数平均线',itemStyle: {normal: {color: "#b84a58",}}}]},markArea: {silent: true,data: [[{name: 'Ⅳ',itemStyle: {normal: {color: '#fff'},},label: {normal: {show: true,position: 'insideBottomRight',fontStyle: 'normal',backgroundColor:'#ccc',color: "#000",fontSize: 20,}},coord: [1,0],}, {coord: [2, 0],}],[{name: 'Ⅲ',itemStyle: {normal: {color: 'transparent',},},label: {normal: {show: true,position: 'insideBottomLeft',fontStyle: 'normal',backgroundColor:'#ccc',color: "#000",fontSize: 20,}},coord: [0, 0],}, {coord: [1,0],}],[{name: 'Ⅰ',itemStyle: {normal: {color: 'transparent',},},label: {normal: {show: true,position: 'insideTopRight',backgroundColor:'#ccc',fontStyle: 'normal',color: "#000",fontSize: 20,}},coord: [1,1],}, {coord: [2,1],}],[{name: 'Ⅱ',itemStyle: {normal: {color: 'transparent',},},label: {normal: {show: true,position: 'insideTopLeft',fontStyle: 'normal',backgroundColor:'#ccc',color: "#000",fontSize: 20,}},coord: [0,1],}, {coord: [1,1],}],]}}]for(var i=0;i<xiaoLv2_name.length;i++){o_data.push({type: 'scatter',name: xiaoLv2_name[i],data: [xiaoLv2_value[i]],symbolSize: 10,color: xiaoLv2_color[i]})}xiaoLv2_option = {legend: {data: xiaoLv2_name},title:{text:'时\n间\n消\n耗\n指\n数',textStyle:{fontSize:10},top:90,left:-5},tooltip: {trigger: 'item',axisPointer: {show: true,type: 'cross',lineStyle: {type: 'dashed',width: 1},},formatter: function(obj) {if (obj.seriesType == "scatter") {return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +obj.seriesName+'</div>' +'<span>' +'费用消耗指数' +'</span>' +' : ' + obj.data[0] +'<br/>' +'<span>' +'时间消耗指数' +'</span>' +' : ' + obj.data[1]}return ''}},grid:{top:'20%',right:'10%',left: '10%',show: true,borderColor: '#666',backgroundColor: '#ffffff'},xAxis: {name: '费用消耗指数',type: 'value',scale: true,max: '1.9',min: '0',splitLine: {show: false},axisLine: {lineStyle: {color: '#666'}},axisTick:{inside:true,},nameTextStyle:{verticalAlign:'bottom',padding:[60,0,0,-190],fontSize: 10}},yAxis: {name: '',type: 'value',scale: true,max: '1.8',min: '0',axisTick:{inside:true,},splitLine: {show: false},axisLine: {lineStyle: {color: '#666'}}},series: o_data};

echarts四象限图加图例相关推荐

echarts四象限图实现自定义均值
var sourceData = [{//均值线参数name: '王小虎',sales: 142.56,services: 64.5 }]var seriesData = sourceData.map ...
echarts实现四象限图
使用echarts实现双向柱状图,效果如下: 代码可以到使用echarts实现四象限散点图-Javascript文档类资源-CSDN下载进行下载,下载下来可以直接双击html使用
echarts 分象限实现气泡图
如图: 代码: option = {title: [{text: '市场份额和植入台数(按省份和省份植入贡献率1)',left: 'center',textStyle: {fontSize: ...
如何设计四象限电压转换电路？
四象限电源是:可以吸收和提供正负电流和电压的电源. 虽然简单电压转换器可以从输入电压生成固定的输出电压,但在某些应用中,这种特性是不够的. 举个例子:控制与电容相连的电压节点,这些电容可以充电至任何电 ...
四象限法推导lm曲线_【老王讲放射】四象限理论
FCR的研发者之一高野正雄将CR系统影像处理的运行原理归纳为"四象限"理论,EDR(曝光数据识别器)的功能和CR系统工作原理可以用"四象限"理论进行描述. 1. ...
番茄时间管理和四象限工作法完美搭配造就职场神器
番茄工作法番茄时间管理又称为番茄工作法,是较简单易行的时间管理与高效工作方法,使用番茄工作法是将每天的工作任务设定为今日目标,选择一个待完成的任务,将番茄时间设为25分钟(每25分钟为为一个番茄时) ...
对四象限法则的一点思考
在大一的一节就业指导课上,一位学长毕业10年后做到了花旗银行的高层后被老师邀请来学校做演讲,他谈到他成功的要诀是始终遵循四象限法则.现在突然回想起他的话,发现自己在四象限法则上做得还不够好. 那位学长 ...
四象限运行模式_信息流广告推广怎么选择正确的出价模式？
5分钟教你如何选择信息流广告的正确出价模式广告主投放信息流广告的时候总是纠结自己的产品应该选择哪种出价扣费模式,今天我们就来介绍下各个模式的出价扣费情况,广告主该如何选择合适的出价扣费模式. 一.了 ...
四象限法推导lm曲线_IS曲线推导
展开全部推导is曲线有三种方法,分别是四象限32313133353236313431303231363533e4b893e5b19e31333431343663法,投资储蓄法,ad=as法,其中四象 ...

echarts四象限图加图例

基于社区内图表的改动，以下是原图：

下边是改动后,添加了图例，区域缩放功能可以根据个人需求修改。

代码如下：

echarts四象限图加图例相关推荐

最新文章

热门文章