echart部分属性说明

最近工作中将hightcharts替换为了echarts,总结一些问题如下:以便以后使用查询

//初始化,list_group-要承接图表的容器id
	var myChart = echarts.init(document.getElementById('list_group'));
	//设置option
	var option = {
			//标题
			title:{
				//位置 值有 left right center
				 left:'center',
				text:'大城市精细化预报趋势',
				textStyle:{
				
				//文字颜色
				color:'grey',
				//字体风格,'normal','italic','oblique'
				fontStyle:'normal',
				//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
				fontWeight:'bold',
				//字体系列
				fontFamily:'sans-serif',
				//字体大小
    			fontSize: 18
			},
			
			subtext:'副标题',
			//副标题文本样式
			subtextStyle:{
			//文字颜色
			color:'grey',
			//字体风格,'normal','italic','oblique'
			fontStyle:'normal',
			//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
			fontWeight:'bold',
			//字体系列
			fontFamily:'sans-serif',
			//字体大小
			fontSize: 14
		}
		},
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross'
		        }
		    },
		    //设置图表大小
		    grid: {
		        right: '20%'
		    },
		    //工具栏
		    toolbox: {
		        feature: {
		            dataView: {show: true, readOnly: false},
		            restore: {show: true},
		            saveAsImage: {show: true}
		        }
		    },
		    //图例
		    legend: {
		    	//图例位置 默认在上方 left:'left'等设置
		    	bottom:'50',
		        data:["温度","最高温","最低温","湿度","降水量","风速","云量"]
		    },
		    grid: {
				bottom: '100',
				left: '12%',
				right: '12%'
        },
        //x轴下方可拖动
		    dataZoom: [{
				startValue: timearr[0],
				endValue: timearr[3],
        }, {
            type: 'inside'
        }],
        //x轴
		    xAxis: [
		        {
		            type: 'category',
		            axisTick: {
		                alignWithLabel: true
		            },
		            //横坐标数据
		            data: timearr
		        }
		    ],
		    //y 轴
		    yAxis: [
		        {
		            type: 'value',
		            name: '占比',
		           
		            position: 'right',
		            axisLabel: {
		                formatter: '{value} '
		            }
		        },
		        {
		            type: 'value',
		            name: '降水量',
		            
		            position: 'right',
		            offset: 40,
		            axisLabel: {
		                formatter: '{value} '
		            }
		        },{
		            type: 'value',
		            name: '风速',
		            offset: 40,
		            position: 'left',
		            axisLabel: {
		                formatter: '{value} '
		            }
		        },
		        {
		            type: 'value',
		            name: '温度',
		           
		            position: 'left',
		            axisLabel: {
		                formatter: '{value} '
		            }
		        }
		    ],
		    //y坐标数据
		    series: [
		        {
		            name:'温度',
		            //指定使用第几个纵坐标 从0开始
		            yAxisIndex: 3,
		            //图形类型 bar柱状
		            type:'line',
		            //拐点形状
		            symbol:'emptyRectangle',
		            //是否平滑
		            smooth:true,
		            //对应数据
		            data:Temperature
		        },
		        {
		            name:'最高温',
		            type:'line',
		            symbol:'emptyDiamond',
		            smooth:true,
		            yAxisIndex: 3,
		            data:MaxTemp
		        },
		        {
		            name:'最低温',
		            type:'line',
		            symbol:'diamond',
		            smooth:true,
		            yAxisIndex: 3,
		            data:MinTemp
		        },
		        {
		            name:'湿度',
		            type:'line',
		            symbol:'rectangle',
		            smooth:true,
		            yAxisIndex: 0,
		            data:Humidity
		        },
		        {
		            name:'降水量',
		            type:'bar',
		            yAxisIndex: 1,
		            data:RainMount
		        },
		        {
		            name:'风速',
		            type:'line',
		            symbol:'circle',
		            smooth:true,
		            yAxisIndex: 2,
		            data:WindSpeed
		        },
		        {
		            name:'云量',
		            type:'line',
		            symbol:'triangle',
		            smooth:true,
		            yAxisIndex: 0,
		            data:CloudMount
		        }
		    ]
		};
		myChart.setOption(option);
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dong__xue

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值