标签:背景 form att 查询 样式表 formatter ems 透明 legend
结合了媒体查询
首先在css样式表中写出你希望雷达图在不同分辨率下的大小
@media screen and (max-height:780px){ .left-score-image { width: 190px; height: 135px; margin-left: 36px; margin-top: 10px; } }
其次,在js文件中加入
var scoreImage = document.getElementById(‘scoreImage‘); var myChart = echarts.init(scoreImage); function test() { myChart.setOption({ title: { text:null }, // 隐藏图表标题 legend: { enabled: false }, // 隐藏图例 tooltip : { trigger: ‘axis‘ }, grid: { // 控制图的大小,调整下面这些值就可以, x: 40, x2: 100, y2: 150// y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上 }, calculable : true, polar : [ { nameGap : 5, // 图中工艺等字距离图的距离 splitNumber: 4, // 网格线的个数 center:[‘50%‘,‘50%‘], // 图的位置 name:{ show: true, // 是否显示工艺等文字 formatter: null, // 工艺等文字的显示形式 textStyle: { color:‘#a3a5b6‘ // 工艺等文字颜色 } }, indicator : [ {text : ‘结构原理‘, max : 100}, {text : ‘机组检修‘, max : 100}, {text : ‘机组试车‘, max : 100}, {text : ‘机组操作‘, max : 100}, {text : ‘日常维护‘, max : 100}, {text : ‘异常处置‘, max : 100} ], axisLine: { // 坐标轴线 show: true, // 默认显示,属性show控制显示与否 lineStyle: { // 属性lineStyle控制线条样式 color: ‘#1e6db3‘, width: 1, type: ‘solid‘ } }, axisLabel: { // 坐标轴文本标签,详见axis.axisLabel show: false, /*formatter: function (value){ return "星期" + "日一二三四五六".charAt(value); },*/ interval: 3, textStyle: { color: ‘#247bd7‘, // 坐标轴刻度文字的样式 fontSize : "10px" } }, splitArea : { show : true, areaStyle : { color: ["#17365d"] // 图表背景网格的颜色 } }, splitLine : { show : true, lineStyle : { width : 1, color : ‘#286fbb‘ // 图表背景网格线的颜色 } } } ], series : [ { name: ‘完全实况球员数据‘, type: ‘radar‘, symbol: "none", // 去掉图表中各个图区域的边框线拐点 itemStyle: { normal: { lineStyle: { color:"rgba(255,255,255,0.5)" // 图表中各个图区域的边框线颜色 }, areaStyle: { type: ‘default‘ } } }, data : [ { value : [50, 42, 88, 60, 90], itemStyle: { normal: { areaStyle: { type: ‘default‘, opacity: 0.6, // 图表中各个图区域的透明度 color: "#1686c2" // 图表中各个图区域的颜色 } } }, name : ‘重整‘ }, { value : [90, 32, 74, 20, 60], itemStyle: { normal: { areaStyle: { type: ‘default‘, opacity: 0.6, color: "#6eaf97" // 图表中各个图区域的颜色 } } }, name : ‘催化‘ } ] } ] }); } test(); $(window).resize(function() {//这是能够让图表自适应的代码 myChart.resize(); });
标签:背景 form att 查询 样式表 formatter ems 透明 legend
原文地址:http://www.cnblogs.com/lina-bwx/p/7567156.html