echarts正负极柱状图

<template><div><div class="headText">投资计划预警</div><div class="bodyblock"><div class="main2"><divclass="fxplain2"ref="fxplain_ref2":style="{ height: zoomNum * 305 + 'px', zoom: 1 / zoomNum }"></div></div></div></div>
</template>
<script type="text/javascript">export default{name:'',data(){return{zoomNum: window.screen.width / 1920, }       },components:{},methods:{fxplain2() {let colorList = [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#20D6D9' // 0% 处的颜色}, {offset: 1,color: '#20D6D9' // 100% 处的颜色}],global: false // 缺省为 false
}, {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#F9BD3D' // 0% 处的颜色}, {offset: 1,color: '#F9BD3D' // 100% 处的颜色}],global: false // 缺省为 false
}]let dataX = ['项目一', '项目一', '项目一', '项目一', '项目一', '项目一']
let showData = [54, -58, -56, 45, 62, 65]       let plains = this.$echarts.init(this.$refs.fxplain_ref2);plains.setOption({tooltip: {formatter: '{b}<br>{a}：{c}'// formatter:'{c}%'},toolbox: {show: false},xAxis: [{type: 'category',nameLocation: 'middle',nameGap: 0,data: dataX,axisLabel: {  interval:0,  rotate:40 ,textStyle: {color:  '#fff' , //坐标值得具体的颜色}
},
axisTick:{show:false},
axisLine:{lineStyle:{color:'#ffffff',width:1,//这里是为了突出显示加上的}},}],yAxis: [{type: 'value',show: true,max:90,min:-90,splitLine:{ show:false },axisTick:{show:false},axisLine:{lineStyle:{color:'#ffffff',}},axisLabel: {textStyle: {color:  '#20D6D9' , //坐标值得具体的颜色}}}],series: [{name: '投资计划预警',xAxisIndex: 0,data: [0.23, 0.20, 0.34, 0.56, 0.43, 0.66, 0.84],type: 'pictorialBar',barGap: '-100%',symbol: 'roundRect',symbolRepeat: 'fixed',symbolClip: true,symbolSize: [16, 4],fontSize: 20,label: {position: 'top',show: true,color: 'white',formatter: '{c}%'//   formatter: '{b}\n{c}%'这种写法会把x轴的文字和百分比都显示},itemStyle: {normal:{color: function(params) {if (params.data > 0) {return colorList[0]} else {return colorList[1]}},},},barWidth: 60,data: showData}],});},},mounted: function(){this.fxplain2()}}
</script>
<style type="text/css">.fxgk .main2{width: 100%;height: 100%;}.fxgk .fxplain2{width: 100%;}
</style>

echarts正负极柱状图相关推荐

ECharts x轴显示正负极
一.问题要求显示的柱状图有正负值,如图效果: 二.经过找官网上关于正负极的例子,再通过查找配置选项,美化为客户需要的样式. 三.结果 // FDIOptionlet FDIOption = {co ...
钽电容正负极_固态电容怎么看正负极，固态电容正负极区分方法
固态电容全称为:固态铝质电解电容.它与普通电容(即液态铝质电解电容)最大差别在于采用了不同的介电材料,液态铝电容介电材料为电解液,而固态电容的介电材料则为导电性高分子材料. 鉴于液态电解电容的诸多问题 ...
12v电源正负极区分_解决冬天车辆无法启动的难题——车用应急启动电源选购要点及评测...
随着近几天气温的下降,想必大部分朋友都已经感受到今年冬天的寒冷了,像我这里前几天的最低温度已经降到了零下20+℃.听起来似乎很冷,不过在北方地区因为有暖气的存在,家中温度至少都能保证在20℃以上,其实 ...
安卓seekbar 怎么判断正负_如果没有万用表，我们要怎么区分电源DC线的正负极呢...
在安防工程中,我们有时候难免会因为疏忽或是别的什么原因,遇到一些问题,比如:需要区分正负极的时候,却发现没有万用表. 一般在工程电源安装时,必须是需要配备万用表等工具,如果不能区别输出正负极,万用表是 ...
12v电源正负极区分_UPS不间断电源的安装、配电计算及相关故障处理方法！
一个典型的数据中心供电系统,由中压配电.变压器.低压配电.不间断电源.末端配电以及发电机等设备组成.其中,UPS的主要作用,是在市电电源中断.发电机启动之前,确保所带的负载持续供电. UPS系统是数据 ...
12v电源正负极区分_弱电工程UPS电源如何安装？如何配置计算？故障如何处理？...
UPS系统是数据中心供电连续性的重要保障,UPS系统的可靠性直接影响数据中心的可靠性,同时,在绝大多数数据中心,UPS系统的损耗可占IT设备能耗的10%以上.了解ups是机房建设的重要环节. 本文将详 ...
常见电容引脚正负极识别大全
常见电容引脚正负极识别大全本文将讲解普通电解电容,贴片铝电解电容,贴片钽电解电容,微调电容和可变电容的引脚正负极识别方法. 1.普通电解电容在电容的外壳上标有"--"的 ...
如何辨别电解电容正负极
电解电容是有极性电容,不能接受反向电压,安装时需按正确的极性安装,所以在使用前我们要正确的区分电解电容正负极. 识别电解电容正负极的正确方法是: 1.螺栓型电解电容正负极识别.螺栓型铝电解电容在套管上 ...
SS14 SS34如何区分正负极
这个肖特基管是现在常用的管子,其正负极很好识别.管子上面标有一道白(或者灰色)线的一端即为负极. 总结:我们坚信,无论是电容还是肖特基二极管,有标识的都是负极. 以上经验,来自于同事把我的电路焊接错误 ...

echarts正负极柱状图

echarts正负极柱状图相关推荐

最新文章

热门文章