echar图表titile,x轴,y轴样式

效果

前后端不分离 ,没有用脚手架
HTML

 <div id="ecLine" :style="{width: '49.5%', height: '310px'}"></div><div id="zhLine" :style="{width: '49.5%', height: '310px'}"></div>

 methods: {//echar图drawLine() {// 基于准备好的dom，初始化echarts实例var myChart1 = echarts.init(document.getElementById('ecLine'));var myChart2 = echarts.init(document.getElementById('zhLine'));// 绘制图表myChart1.setOption({title:{text:'当日趋势图',//标题样式textStyle:{color:'#000',        //颜色fontStyle:'normal',     //风格fontWeight:'normal',    //粗细fontFamily:'Microsoft yahei',   //字体fontSize:16,     //大小align:'center',   //水平对齐lineHeight:50},//     title位置padding:[20, 0, 20, 30]},grid:{          //显示数据的图表位于当前canvas的坐标轴x:50,y:80,borderWidth:1,},//悬浮显示tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#fff'}}},//折点提示legend: {data:['异常台数'],//折点提示位置left:'90%',top:'5%'},xAxis: {type: 'category',data: ['20190824', '20190825', '20190826', '20190827', '20190828', '20190829', '20190830'],//轴颜色axisLine: {lineStyle: {color: '#999'}},//    去除分割线splitLine:{show:false},axisTick:{show:false},},yAxis: {name:'台数',nameTextStyle:{padding: [0,0,0,-20],color:'#999999'},axisLine: {lineStyle: {color: '#999'}},//去除分割线axisTick:{show:false},type: 'value',//取消y轴网格interval: 5,min:0,max:20,scale: true,show:true,splitLine:{show:false},},series: [{name:'异常台数',type:'line',stack: '总量',color:'#fccd35',data:[5, 15, 12, 10, 9, 16, 14]},{//    设置实心点大小symbolSize: 8,itemStyle : {normal : {color: "#fccd35",lineStyle:{color:'#fccd35'}}},data: [5, 15, 12, 10, 9, 16, 14],type: 'line'}]});myChart2.setOption({title: {text: '本月累计趋势图',textStyle:{color:'#000',        //颜色fontStyle:'normal',     //风格fontWeight:'normal',    //粗细fontFamily:'Microsoft yahei',   //字体fontSize:16,     //大小align:'center',   //水平对齐lineHeight:50},//     title位置padding:[20, 0, 20, 30]},legend: {data:['环比',],//折点提示位置left:'85%',top:'5%'},grid:{          //显示数据的图表位于当前canvas的坐标轴x:50,y:80,borderWidth:1,},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},xAxis : [{type : 'category',data : ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月'],axisLine: {lineStyle: {color: '#999'}},axisTick:{show:false},},],yAxis : [{type : 'value',max: 90,name:'台数',interval: 30,scale: true,show:true,splitLine:{show:false},axisTick:{show:false},nameTextStyle:{padding: [0,0,0,-20],color:'#999999'},axisLine: {lineStyle: {color: '#999'}},},{type: 'value',// name: '温度',min: 0,max:100,//取消y轴网格interval: 25,scale: true,show:true,splitLine:{show:false},axisTick:{show:false},axisLine: {lineStyle: {color: '#999'}},}],series : [{name:'环比',type:'line',stack: '总量',color:'#fccd35',symbolSize: 8,yAxisIndex: 1,data:[30, 15, 42, 65, 38, 40, 78,50]},{name:'柱状图',type:'bar',//柱状图宽度barWidth: '13%',data:[55,56,40,59,45,23,12,16],itemStyle:{normal:{color:'#84d1d3'}},},],});},//分页handleSizeChange(val) {console.log(`每页 ${val} 条`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}}

一表多图

  series : [{name:'环比',type:'line',stack: '总量',color:'#fccd35',symbolSize: 8,//按右边y轴显示yAxisIndex: 1,data:[30, 15, 42, 65, 38, 40, 78,50]},{name:'柱状图',type:'bar',//柱状图宽度barWidth: '13%',data:[55,56,40,59,45,23,12,16],itemStyle:{normal:{color:'#84d1d3'}},},],

echar图表titile,x轴,y轴样式相关推荐

echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
先详细看一下xAxis和yAxis配置的图表效果下图详细的标注了图表中x轴y轴可见的内容说明一下: x轴y轴在echarts配置项里,从内容上来说大体上没有太大区别,x轴能用的配置项y轴基本也可以 ...
d3.js多个x轴y轴canvas柱状图
d3.js多个x轴y轴canvas柱状图最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对 ...
matplotlib 笔记：设置x轴 y轴文字
原本的图: import numpy as np import matplotlib.pyplot as plt lst=range(10000) a=np.random.choice(lst,150 ...
opencv cv2.flip()函数（图像翻转、镜像、颠倒）（沿x轴翻转0、沿y轴翻转【正值】、同时沿x轴y轴翻转-【负值】）
def flip(src, flipCode, dst=None): # real signature unknown; restored from __doc__""" ...
Echarts去除x轴,y轴网格线,网格区域(背景)
每次写到Echarts时,总会忘记去除x轴,y轴网格线,网格区域(背景)是怎么设置的了,在这里记录一下,有个印象 xAxis : [{type : 'value',splitNumber: 2,sca ...
Android X轴Y轴Z轴旋转
Android中并没有提供直接做3D翻转的动画,所以关于3D翻转的动画效果需要我们自己实现,一个简单的办法就是重写Animation.这里只是以Y轴旋转进行下说明,至于X轴.Z轴和Y轴的原理是一样的. ...
三菱FX5U，机床X轴Y轴工作台定位控制程序全部使用两轴直线插补有自动定位，手动定位！手动控制有，点动一次按钮每次走设置的距离
三菱FX5U,机床X轴Y轴工作台定位控制程序!使用三菱J4-A系列伺服驱动器绝对位置系统,程序大小27000多步 1.本程序最多可做20个定位工序,全部使用两轴直线插补! 2.有自动定位,手动定位!手 ...
西门子S7-1200PLC结构化编程5轴伺服项目三轴机械手X轴-Y轴-Z轴联动取放料PTO脉冲定位控制台达B2伺服
西门子S7-1200PLC结构化编程5轴伺服项目项目实现功能: 1.三轴机械手X轴-Y轴-Z轴联动取放料PTO脉冲定位控制台达B2伺服 2.台达伺服速度模式应用+扭矩模式应用实现收放卷 3.程序为结 ...

echar图表titile,x轴,y轴样式

echar图表titile,x轴,y轴样式相关推荐

最新文章

热门文章