Web数据可视化教程（基于ECharts）课件 任务3-4 绘制柱状图分析蒸发量、降水量和温度之间的关系

Web数据可视化教程（基于ECharts）模块3绘制ECharts柱状图和条形图【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系（1）启动Dreamweaver，创建网页task0304.html，将该文件保存到本模块文件夹Unit03中。（2）在网页task0304.html中绘制柱状图分析蒸发量、降水量和温度之间的关系，并进行必要的属性设置。【任务描述】【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系constcolors=['#5470C6','#91CC75','#EE6666'];option={color:colors,//配置提示框组件

tooltip:{trigger:'axis',axisPointer:{type:'cross'}},

【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系grid:{right:'20%'},//配置工具栏组件

toolbox:{show:true,feature:{dataView:{show:true,readOnly:false},restore:{show:true},saveAsImage:{show:true}}},【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系

//配置图例组件

legend:{data:['蒸发量','降水量','气温']},【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系

//配置x轴

xAxis:[{//指定x轴上的类目数据及格式

type:'category',axisTick:{alignWithLabel:true},data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系yAxis:[{type:'value',name:'蒸发量',position:'right',alignTicks:true,axisLine:{show:true,lineStyle:{color:colors[0]}},【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系axisLabel:{formatter:'{value}ml'}},【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系{type:'value',name:'降水量',position:'right',alignTicks:true,offset:80,axisLine:{show:true,lineStyle:{color:colors[1]}},【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系axisLabel:{formatter:'{value}ml'}},【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系{type:'value',name:'温度',position:'left',alignTicks:true,axisLine:{show:true,lineStyle:{color:colors[2]}},【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系axisLabel:{formatter:'{value}℃}}],【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系series:[{name:'蒸发量',type:'bar',data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]},【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系{name:'降水量',type:'bar',yAxisIndex:1,data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3]},【代码编写】【任务3-4】绘制柱状图分析蒸发量、降水量和温度之间的关系{name:'气温',type:'line',yAxisIndex:2,data:[2.0,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23.0,16.5