3.数据可视化 例子

已于 2022-06-04 11:19:54 修改
阅读量115 收藏
点赞数
分类专栏： Echarts 文章标签： echarts javascript 前端
于 2022-06-04 10:57:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45097792/article/details/125119625
版权

目录：

1.未来一周气温变化：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>markline标记线和markpoint标记点</title>
	<!--引入echarts.js-->
	<script src="js/echarts.min.js"></script>
</head>
<body>
	<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 900px; height: 600px;"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		//指定图表的配置项和数据
		var option = {
			title : {
				text : '未来一周气温变化',
			},
			toolbox : {
				show : true,
				feature : {
					dataView : {
						show : true
					},
					restore : {
						show : true
					},
					dataZoom : {
						show : true
					},
					saveAsImage : {
						show : true
					},
					magicType : {
						type : [ 'line', 'bar' ]
					}
				}
			},
			tooltip : {
				trigger : 'axis',
				formatter : "{a}<br/>{b}:{c}°C"
			},
			legend : {
				data : [ '气温变化' ]
			},
			xAxis : {
				data : [ "周一", "周二", "周三", "周四", "周五", "周六", "周日" ]
			},
			yAxis : {},
			series : [ {
				name : '气温变化',
				type : 'line',
				data : [ 21, 25, 28, 31, 26, 26, 22, 18 ],
				//设置标记点
				markPoint : {
					data : [ {
						type : 'max',
						name : '最大值'
					}, {
						type : 'min',
						name : '最小值',
						symbol : 'arrow'
					} ]
				},
				//设置标记线
				markLine : {
					data : [ {
						type : 'average',
						name : '平均值'
					} ]
				}
			} ]
		};
		//使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

在这里插入图片描述

2.动态

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<script src="js/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>  
<script type="text/javascript">
var base = +new Date(2014, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 150];
var now = new Date(base);
function addData(shift) {
now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
date.push(now);
data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
if (shift) {
date.shift();
data.shift();
}
now = new Date(+new Date(now) + oneDay);
}
for (var i = 1; i < 100; i++) {
addData();
}
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
boundaryGap: [0, '50%'],
type: 'value'
},
series: [
{
name:'成交',
type:'line',
smooth:true,
symbol: 'none',
stack: 'a',
areaStyle: {
normal: {}
},
data: data
}
]
};
setInterval(function () {
addData(true);
myChart.setOption({
xAxis: {
data: date
},
series: [{
name:'成交',
data: data
}]
});
}, 500);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option)
</script>
</body>

在这里插入图片描述

3.饼图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pie饼图</title>
<!--引入echarts.js-->
<script src="js/echarts.min.js"></script>
</head>
<body>
	<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 900px; height: 600px;"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		//指定图表的配置项和数据
		var option = {
			title : {
				text : '重庆市常住人口',
				subtext : '数据来源百度百科',
				x : 'center'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a}<br/>{b}:{c}({d}%)"
			},
			legend : {
				orient : 'vertical',
				left : 'left',
				data : [ '渝中区', '万州区', '涪陵区', '大渡口区', '江北区', "沙坪坝区", "九龙坡区",
						"南岸区", "北碚区", "綦江区", "大足区", "渝北区", "巴南区", "黔江区", "长寿区",
						"江津区", "合川区", "永川区", "南川区", "璧山区", "铜梁区", "潼南区", "荣昌区",
						"开州区", "梁平区", "武隆区", "城口县", "丰都县", "垫江县", "忠县", "云阳县",
						"奉节县", "巫山县", "巫溪县", "石柱土家族自治县", "秀山土家族苗族自治县",
						"酉阳土家族苗族自治县", "彭水苗族土家族自治县" ]
			},
			series : [ {
				name : '所占比例',
				type : 'pie',
				radius : '55%',
				center : [ '50%', '60%' ],
				data : [{
					value : 64.95,
					name : '渝中区'
				}, {
					value : 160.74,
					name : '万州区'
				}, {
					value : 114.08,
					name : '涪陵区'
				}, {
					value : 33.27,
					name : '大渡口区'
				}, {
					value : 84.98,
					name : '江北区'
				}, {
					value : 113.39,
					name : '沙坪坝区'
				}, {
					value : 118.69,
					name : '九龙坡区'
				}, {
					value : 85.81,
					name : '南岸区'
				}, {
					value : 78.62,
					name : '北碚区'
				}, {
					value : 107.84,
					name : '綦江区'
				}, {
					value : 76.39,
					name : '大足区'
				}, {
					value : 160.25,
					name : '渝北区'
				}, {
					value : 100.58,
					name : '巴南区'
				}, {
					value : 46.2,
					name : '黔江区'
				}, {
					value : 82.43,
					name : '长寿区'
				}, {
					value : 133.19,
					name : '江津区'
				}, {
					value : 136.06,
					name : '合川区'
				}, {
					value : 109.61,
					name : '永川区'
				}, {
					value : 56.43,
					name : '南川区'
				}, {
					value : 72.52,
					name : '璧山区'
				}, {
					value : 68.72,
					name : '铜梁区'
				}, {
					value : 68.23,
					name : '潼南区'
				}, {
					value : 70.1,
					name : '荣昌区'
				}, {
					value : 169.12,
					name : '开州区'
				}, {
					value : 66.40,
					name : '梁平区'
				}, {
					value : 41.44,
					name : '武隆区'
				}, {
					value : 18.63,
					name : '城口县'
				}, {
					value : 59.56,
					name : '丰都县'
				}, {
					value : 67.67,
					name : '垫江县'
				}, {
					value : 70.80,
					name : '忠县'
				}, {
					value : 89.66,
					name : '云阳县'
				}, {
					value : 75.33,
					name : '奉节县'
				}, {
					value : 46.23,
					name : '巫山县'
				}, {
					value : 39.1,
					name : '巫溪县'
				}, {
					value : 38.65,
					name : '石柱土家族自治县'
				}, {
					value : 49.13,
					name : '秀山土家族苗族自治县'
				}, {
					value : 55.65,
					name : '酉阳土家族苗族自治县'
				}, {
					value : 50.64,
					name : '彭水苗族土家族自治县'
				} ]
			} ]
		};
		//使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

在这里插入图片描述

4.雷电灾害统计

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title标题组件</title>
		<!--引入echarts.js-->
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<!--为ECharts准备一个具备大小（宽高）的Dom-->
		<div id="main"style="width:900px;height:600px;"></div>
		<script type="text/javascript">
			//基于准备好的dom，初始化echarts实例
			var myChart=echarts.init(document.getElementById('main'));//指定图表的配置项和数据
			var option={
			  title:{
				show:true,
				//标题文字
				text:'雷电灾害事故',
				//子标题
				subtext:'（单位：例）',
				//标题位置数字就是像素值，也可以是center、left、right这种值
				left:'100',
				//边框颜色
				borderColor:'blue',
				//边框宽度
				borderWidth:2,
				textStyle:{fontSize:19}
			  },
			  toolbox:{
				show:true,
				feature:{saveAsImage:{show:true}}
			  },
			  legend:{
				data:['雷电灾害事数']
			  },
			  xAxis:{
				data:["1997","1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009","2010"]},
			  yAxis:{},
			  series:[{
				name:'雷电灾害事数',
				type:'bar',
				data:[556,1102,1467,2099,1995,3498,4014,5753,5322,6265,6346,7123,6586,6019]}
			  ]};
			  //使用刚指定的配置项和数据显示图表。
			  myChart.setOption(option);
		</script>
	</body>
</html>

在这里插入图片描述

5.住宅面积

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>toolbox工具箱组件</title>
<!--引入echarts.js-->
<script src="js/echarts.min.js"></script>
</head>
<body>
	<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 1100px; height: 600px;"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		//指定图表的配置项和数据
		var option = {
			title : {
				text : '武汉各区商品住宅成交面积'
			},
			toolbox : {
				//是否显示
				show : true,
				//具体显示的功能
				feature : {
					//数据视图
					dataView : {
						show : true
					},
					//还原
					restore : {
						show : true
					},
					//缩放视图
					dataZoom : {
						show : true
					},
					//保存图片
					saveAsImage : {
						show : true
					},
					//动态类型切换
					magicType : {
						type : [ 'line', 'bar' ]
					}
				}
			},
			legend : {
				data : [ '面积:m2' ]
			},
			xAxis : {
				data : [ "江岸区", "江汉区", "硚口区", "汉阳区", "武昌区", "青山区", "洪山区",
						"东西湖区", "汉南区", "蔡甸区", "江夏区", "黄陂区", "新洲区" ]
			},
			yAxis : {},
			series : [ {
				name : '面积:m2',
				type : 'bar',
				data : [ 3301.02, 2332.81, 4040.86, 3524.27, 5346.63, 1100.81,
						2014.5, 2261, 1409.7, 3409.42, 2347.92, 1057.12, 992.84 ]
			} ]
		};
		//使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

在这里插入图片描述

6.公式销售额

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tooltip弹窗组件</title>
<!--引入echarts.js-->
<script src="js/echarts.min.js"></script>
</head>
<body>
	<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 900px; height: 600px;"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));//指定图表的配置项和数据
		var option = {
			title : {
				text : '某公司2017年销售额'
			},
			toolbox : {
				show : true,
				feature : {
					dataView : {
						show : true
					},
					restore : {
						show : true
					},
					dataZoom : {
						show : true
					},
					saveAsImage : {
						show : true
					},
					magicType : {
						type : [ 'line', 'bar' ]
					}
				}
			},
			//出发方式，axis就是从x轴出发
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : [ '销售额' ]
			},
			xAxis : {
				data : [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月",
						"10月", "11月", "12月" ]
			},
			yAxis : {},
			series : [ {
				name : '销售额',
				type : 'bar',
				data : [ 5673, 4546, 3325, 2246, 2684, 3742, 4685, 5346, 3420,
						5885, 3791, 4953 ]
			} ]
		};
		//使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

在这里插入图片描述

7.汽车仪表盘

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--    <script src="../../lib/echarts.js"></script>-->
  <script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">

  var myChart = echarts.init(document.getElementById("main"),'dark');

  var color1 = [[0.33, "rgba(0,255,0,1)"], [0.5, "rgba(0,255,255,1)"],[1, "rgba(255,0,0,1)"] ];
  var option = {
    backgroundColor:'rgb(0,0,0,1)',
    title:{
      text:'汽车仪表盘',
      textStyle:{
        fontsize:30,
        color:'#DC143C'
      },
      x:'45%',
      y:'10%'
    },
    //工具
    tooltip:{
      formatter:'{a}<br/>{b}:{c}'
    },
    series:[
      {
        name:'仪表盘',
        type:'gauge',
        min:0,
        max:240,
        radius:'50%',
        splitNumber:12,
        axisLine:{
          lineStyle:{
            width:5,
            color:color1,

          }
        },
        axisTick:{
          length:10,splitNumber: 5,lineStyle: {color:'#FDCF20'}
        },
        splitLine:{
          length: 20,
          lineStyle:{color: '#FDCF20',}
        },
        title:{
          textStyle:{fontWeight:'bolder',fontsize:20,fontStyle:'italic',color:'auto'},


        },
        pointer:{
          show:true,
          length:'75%',
          width: 10

        },
        itemStyle:{
          color:color1,
          shadowBlur: 20,
          shadowColor: "pink",
        },



        detail:{
          show:true,
          color:'auto',
          formatter: '{value}'
        },
        data:
                [ {name:'速度表(km/h)', value:20},

                ]

      },
      {
        name: '转速', type: 'gauge',
        center: ['20%', '55%'],  //设置转速仪表盘中心点的位置，默认全局居中
        radius: '35%',  //设置转速油表仪表盘的大小
        min: 0,  //设置转速仪表盘的最小值
        max: 7,  //设置转速仪表盘的最大值
        endAngle: 45,
        splitNumber: 7,  //设置转速仪表盘的分隔数目为7
        axisLine: { show:true,lineStyle: { width: 4 ,color:color1} },  //设置属性lineStyle控制线条样式
        axisTick: {  //设置坐标轴小标记
          length: 6,  //设置属性length控制线长
          splitNumber: 5,  //设置坐标轴小标记的分隔数目为5
          lineStyle: {  //设置属性lineStyle控制线条样式
            color: '#FDCF20'
          }
        },
        splitLine: {  //设置分隔线
          length: 10,  //设置属性length控制线长
          lineStyle: {  //设置属性lineStyle（详见lineStyle）控制线条样式
            color: '#FDCF20'
          }
        },
        //指针
        pointer:{
          show:true,
          length:'70%',
          width: 5

        },
        itemStyle:{
          color:color1,
          shadowBlur: 20,  //设置(发光效果)图形阴影的模糊大小
          shadowColor: "pink",  //设置阴影颜色，支持的格式同color
        },
        title: {
          offsetCenter: ['30% ', '-30%'],
          textStyle:{fontWeight:'bolder',fontsize:3,fontStyle:'italic',color:'auto'},
        },
        detail: { textStyle: { fontWeight: 'bolder' ,fontSize:20,color:'auto'},formatter: '{value} ' },
        data: [{ value: 1.5, name: '转速(x1000 r/m)' }]
      },
      {
        name:'里程',type:'gauge',
        center: ['80%','50%'],
        min:0,
        max:10,
        startAngle:135,
        endAngle: 45,
        splitNumber: 5,
        radius: '35%',
        axisLine: {
          lineStyle: {color:color1,width:3}
        },
        axisTick: {
          splitNumber: 5,
          length: 5,
          lineStyle: {color:'#FDCF20'}
        },
        splitLine: {
          length: 15,lineStyle: {color: '#FDCF20'}
        },
        pointer: {
          show: true,
          width: 3,
          length: '70%'
        },
        itemStyle: {
          color:color1,
          shadowBlur: 10,
          shadowColor: 'white'
        },
        title: {
          offsetCenter: ['0', '-120%'],
          textStyle:{fontWeight:'bolder',fontsize:3,fontStyle:'italic',color:'auto'},
        },
        detail: { show:false,textStyle: { fontWeight: 'bolder' ,fontSize:20,color:'auto'},formatter: '{value} ' },
        data: [{ value: 1.5, name: '里程表(x1000 KM)' }]

      },
      {
        name: '油表', type: 'gauge',
        center: ['80%','50%'],
        radius: '35%',
        min: 0,
        max: 2,
        startAngle: 315, endAngle: 225,
        splitNumber: 2,
        axisLine: { lineStyle: { width: 3 ,color: color1} },  //设置属性lineStyle控制线条样式
        axisTick: {
          splitNumber: 5,
          length: 10,
          lineStyle: {
            color: '#FDCF20'
          }
        },
        axisLabel: {
          formatter: function (v) {
            switch (v + '') {
              case '0': return 'E';
              case '1': return '油表';
              case '2': return 'F';
            }
          }
        },
        splitLine: {
          length: 15,
          lineStyle: {
            color: '#FDCF20'
          }
        },
        pointer: { width: 4 },
        itemStyle: {
          color:'yellow',
          shadowBlur: 10,
          shadowColor: 'white'
        },
        title: { show: false },
        detail: { show: false },
        data: [{ value: 0.5, name: 'gas' }]
      },

    ]
  }
  setInterval(function (arg) {
    var num = Math.random()
    option.series[0].data[0].value = (num*240).toFixed(2);
    option.series[1].data[0].value = (num*7).toFixed(2);
    option.series[2].data[0].value = (num*10).toFixed(2);
    option.series[3].data[0].value = (num*10).toFixed(2);
    myChart.setOption(option)

  },1000)

</script>

</body>
</html>

在这里插入图片描述

8.七天用户数据

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script type="text/javascript" src="js/echarts.min.js"></script>

<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>

<body>
</body>

</html>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var arr = [];//用来存放最近七天的时间

    function getBeforeDate(n) {
        var n = n;
        console.log(n);//
        var d = new Date();
        var year = d.getFullYear();
        var mon = d.getMonth() + 1;
        var day = d.getDate();
        if(day <= n) {
            if(mon > 1) {
                mon = mon - 1;
            } else {
                year = year - 1;
                mon = 12;
            }
        }
        d.setDate(d.getDate() + n); //很重要，+n取得是前一天的时间
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
        return s;
    }

    for(var i = 0; i > -7; i--) {
        arr.push(getBeforeDate(i));

    }
    console.log(arr);
    option = {
        title: {
            text: '七天用户数据'
        },
        tooltip: {
            trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
        },
        xAxis: {
            type: 'category',//类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
            name: '日期',//坐标轴名称
            boundaryGap: false,
            data: arr.reverse(),
            nameGap: 7,//坐标轴名称与轴线之间的距离。
            axisTick: {//是否显示坐标轴刻度。
                inside: true//坐标轴刻度是否朝内，默认朝外。
            }
        },
        yAxis: {
            type: 'value',
            name: '人数',
            splitLine: {
                show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
            },
            nameGap: 15,
            axisTick: {
                inside: true
            }
        },
        series: [{
            type: 'line',//线条
            name: '人数', //系列名称，用于tooltip的显示
            data: [40, 50, 30, 90, 100, 60, 120],
            symbol: 'circle',//标记的类型：圆圈
            itemStyle: {
                normal: {
                    shadowBlur: 50,//文字块的背景阴影长度。
                    shadowColor: 'red',//文字块的背景阴影颜色。
                    color: 'red',//图形的颜色
                    lineStyle: {
                        color: '#4d6dfd',//线的颜色
                        width: 1//线的宽度
                    }
                }
            }
        }],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

在这里插入图片描述

9.雷达图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radar雷达图</title>
<!--引入echarts.js-->
<script src="js/echarts.min.js"></script>
</head>
<body>
	<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 900px; height: 600px;"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		//指定图表的配置项和数据
		option = {
			title : {
				text : '基础雷达图'
			},
			tooltip : {},
			legend : {
				data : [ '预算分配（AllocatedBudget）', '实际开销（ActualSpending）' ]
			},
			radar : {
				//sshape:'circle',
				indicator : [ {
					name : '销售（sales）',
					max : 6500
				}, {
					name : '管理（Administration）',
					max : 16000
				}, {
					name : '信息技术（InformationTechology）',
					max : 30000
				}, {
					name : '客服（CustomerSupport）',
					max : 38000
				}, {
					name : '研发（Development）',
					max : 52000
				}, {
					name : '市场（Marketing）',
					max : 25000
				} ]
			},
			series : [ {
				name : '预算vs开销（Budgetvsspending）',
				type : 'radar',
				//areaStyle:{normal:{}},
				data : [ {
					value : [ 4300, 10000, 28000, 35000, 50000, 19000 ],
					name : '预算分配（AllocatedBudget）'
				}, {
					value : [ 5000, 14000, 28000, 31000, 42000, 21000 ],
					name : '实际开销（ActualSpending）'
				} ]
			} ]
		};
		//使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

在这里插入图片描述

10.散点图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>scatter散点图</title>
<!--引入echarts.js-->
<script src=js/echarts.min.js></script>
</head>
<body>
	<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 900px; height: 600px;"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		var myChart=echarts.init(document.getElementById('main'));
		//指定图表的配置项和数据
		var dataBJ=[
			[1,55,9,56,0.46,18,6,"良"],
			[2,25,11,21,0.65,34,9,"优"],
			[3,56,7,63,0.3,14,5,"良"],
			[4,33,7,29,0.33,16,6,"优"],
			[5,42,24,44,0.76,40,16,"优"],
			[6,82,58,90,1.77,68,33,"良"],
			[7,74,49,77,1.46,48,27,"良"],
			[8,78,55,80,1.29,59,29,"良"],
			[9,267,216,280,4.8,108,64,"重度污染"],
			[10,185,127,216,2.52,61,27,"中度污染"],
			[11,39,19,38,0.57,31,15,"优"],
			[12,41,11,40,0.43,21,7,"优"],
			[13,64,38,74,1.04,46,22,"良"],
			[14,108,79,120,1.7,75,41,"轻度污染"],
			[15,108,63,116,1.48,44,26,"轻度污染"],
			[16,33,6,29,0.34,13,5,"优"],
			[17,94,66,110,1.54,62,31,"良"],
			[18,186,142,192,3.88,93,79,"中度污染"],
			[19,57,31,54,0.96,32,14,"良"],
			[20,22,8,17,0.48,23,10,"优"],
			[21,39,15,36,0.61,29,13,"优"],
			[22,94,69,114,2.08,73,39,"良"],
			[23,99,73,110,2.43,76,48,"良"],
			[24,31,12,30,0.5,32,16,"优"],
			[25,42,27,43,1,53,22,"优"],
			[26,154,117,157,3.05,92,58,"中度污染"],
			[27,234,185,230,4.09,123,69,"重度污染"],
			[28,160,120,186,2.77,91,50,"中度污染"],
			[29,134,96,165,2.76,83,41,"轻度污染"],
			[30,52,24,60,1.03,50,21,"良"],
			[31,46,5,49,0.28,10,6,"优"]
		];
		var dataGZ=[
			[1,26,37,27,1.163,27,13,"优"],
			[2,85,62,71,1.195,60,8,"良"],
			[3,78,38,74,1.363,37,7,"良"],
			[4,21,21,36,0.634,40,9,"优"],
			[5,41,42,46,0.915,81,13,"优"],
			[6,56,52,69,1.067,92,16,"良"],
			[7,64,30,28,0.924,51,2,"良"],
			[8,55,48,74,1.236,75,26,"良"],
			[9,76,85,113,1.237,114,27,"良"],
			[10,91,81,104,1.041,56,40,"良"],
			[11,84,39,60,0.964,25,11,"良"],
			[12,64,51,101,0.862,58,23,"良"],
			[13,70,69,120,1.198,65,36,"良"],
			[14,77,105,178,2.549,64,16,"良"],
			[15,109,68,87,0.996,74,29,"轻度污染"],
			[16,73,68,97,0.905,51,34,"良"],
			[17,54,27,47,0.592,53,12,"良"],
			[18,51,61,97,0.811,65,19,"良"],
			[19,91,71,121,1.374,43,18,"良"],
			[20,73,102,182,2.787,44,19,"良"],
			[21,73,50,76,0.717,31,20,"良"],
			[22,84,94,140,2.238,68,18,"良"],
			[23,93,77,104,1.165,53,7,"良"],
			[24,99,130,227,3.97,55,15,"良"],
			[25,146,84,139,1.094,40,17,"轻度污染"],
			[26,113,108,137,1.481,48,15,"轻度污染"],
			[27,81,48,62,1.619,26,3,"良"],
			[28,56,48,68,1.336,37,9,"良"],
			[29,82,92,174,3.29,0,13,"良"],
			[30,106,116,188,3.628,101,16,"轻度污染"],
			[31,118,50,0,1.383,76,11,"轻度污染"]
		];
		var dataSH=[
			[1,91,45,125,0.82,34,23,"良"],
			[2,65,27,78,0.86,45,29,"良"],
			[3,83,60,84,1.09,73,27,"良"],
			[4,109,81,121,1.28,68,51,"轻度污染"],
			[5,106,77,114,1.07,55,51,"轻度污染"],
			[6,109,81,121,1.28,68,51,"轻度污染"],
			[7,106,77,114,1.07,55,51,"轻度污染"],
			[8,89,65,78,0.86,51,26,"良"],
			[9,53,33,47,0.64,50,17,"良"],
			[10,80,55,80,1.01,75,24,"良"],
			[11,117,81,124,1.03,45,24,"轻度污染"],
			[12,99,71,142,1.1,62,42,"良"],
			[13,95,69,130,1.28,74,50,"良"],
			[14,116,87,131,1.47,84,40,"轻度污染"],
			[15,108,80,121,1.3,85,37,"轻度污染"],
			[16,134,83,167,1.16,57,43,"轻度污染"],
			[17,79,43,107,1.05,59,37,"良"],
			[18,71,46,89,0.86,64,25,"良"],
			[19,97,71,113,1.17,88,31,"良"],
			[20,84,57,91,0.85,55,31,"良"],
			[21,87,63,101,0.9,56,41,"良"],
			[22,104,77,119,1.09,73,48,"轻度污染"],
			[23,87,62,100,1,72,28,"良"],
			[24,168,128,172,1.49,97,56,"中度污染"],
			[25,65,45,51,0.74,39,17,"良"],
			[26,39,24,38,0.61,47,17,"优"],
			[27,39,24,39,0.59,50,19,"优"],
			[28,93,68,96,1.05,79,29,"良"],
			[29,188,143,197,1.66,99,51,"中度污染"],
			[30,174,131,174,1.55,108,50,"中度污染"],
			[31,187,143,201,1.39,89,53,"中度污染"]
		];
		
		var schema=[
			{name:'date',index:0,text:'日'},
			{name:'AQIindex',index:1,text:'AQI指数'},
			{name:'PM25',index:2,text:'PM2.5'},
			{name:'PM10',index:3,text:'PM10'},
			{name:'CO',index:4,text:'一氧化碳（CO）'},
			{name:'NO2',index:5,text:'二氧化氮（NO2）'},
			{name:'SO2',index:6,text:'二氧化硫（SO2）'}
		];
		var itemStyle={
			normal:{
				opacity:0.8,
				shadowBlur:10,
				shadowOffsetX:0,
				shadowOffsetY:0,
				shadowColor:'rgba(0,0,0,0.5)'}
		};
		option={
			backgroundColor:'#333',
			color:['#dd4444','#fec42c','#80F1BE'],
			legend:{
				y:'top',
				data:['北京','上海','广州'],
				textStyle:{color:'#fff',fontSize:16}
			},
			grid:{x:'10%',x2:150,y:'18%',y2:'10%'},
			tooltip:{
				padding:10,
				backgroundColor:'#222',
				borderColor:'#777',
				borderWidth:1,
				formatter:function(obj){
					var value=obj.value;
					return '<div style="border-bottom:1px solid rgba(255,255,255,.3);font-size:18px;padding-bottom:7px;margin-bottom:7px">' +
					obj.seriesName+''+value[0]+'日：'+value[7]+'</div>'+schema[1].text+
					'：'+value[1]+'<br>'+schema[2].text+'：'+value[2]+'<br>'+schema[3].text+'：'+
					value[3]+'<br>'+schema[4].text+'：'+value[4]+'<br>'+
					schema[5].text+'：'+value[5]+'<br>'+schema[6].text+'：'+value[6]+'<br>';
				}
			},
			xAxis:{
				type:'value',
				name:'日期',
				nameGap:16,
				nameTextStyle:{
					color:'#fff',
					fontSize:14
				},
				max:31,
				splitLine:{show:false},
				axisLine:{lineStyle:{color:'#777'}},
				axisTick:{lineStyle:{color:'#777'}},
				axisLabel:{formatter:'{value}',textStyle:{color:'#fff'}}
			},
			yAxis:{
				type:'value',
				name:'AQI指数',
				nameLocation:'end',
				nameGap:20,
				nameTextStyle:{
					color:'#fff',
					fontSize:16},
				axisLine:{lineStyle:{color:'#777'}},
				axisTick:{lineStyle:{color:'#777'}},
				splitLine:{show:false},
				axisLabel:{textStyle:{color:'#fff'}}
			},
			visualMap:[{
				left:'right',
				top:'10%',
				dimension:2,
				min:0,
				max:250,
				itemWidth:30,
				itemHeight:120,
				calculable:true,
				precision:0.1,
				text:['圆形大小：PM2.5'],
				textGap:30,
				textStyle:{color:'#fff'},
				inRange:{symbolSize:[10,70]},
				outOfRange:{symbolSize:[10,70],
				color:['rgba(255,255,255,.2)']},
				controller:{
					inRange:{color:['#c23531']},
					outOfRange:{color:['#444']}
				}
			},{
				left:'right',
				bottom:'5%',
				dimension:6,
				min:0,
				max:50,
				itemHeight:120,
				calculable:true,
				precision:0.1,
				text:['明暗：二氧化硫'],
				textGap:30,
				textStyle:{color:'#fff'},
				inRange:{colorLightness:[1,0.5]},
				outOfRange:{color:['rgba(255,255,255,.2)']},
				controller:{
					inRange:{color:['#c23531']},
					outOfRange:{color:['#444']}
				}}],
				series:[{
					name:'北京',
					type:'scatter',
					itemStyle:itemStyle,
					data:dataBJ
				},{
					name:'上海',
					type:'scatter',
					itemStyle:itemStyle,
					data:dataSH
				},{
					name:'广州',
					type:'scatter',
					itemStyle:itemStyle,
					data:dataGZ
				}
		]};
		//使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

在这里插入图片描述

11.多坐标轴

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>yaxis多坐标轴</title>
	<!--引入echarts.js-->
	<script src="js/echarts.min.js"></script>
</head>
<body>
	<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 900px; height: 600px;"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		var myChart=echarts.init(document.getElementById('main'));
		//指定图表的配置项和数据
		option={
			tooltip:{
				trigger:'axis'
			},
			toolbox:{
				feature:{
					dataView:{
						show:true,
						readOnly:false
					},
					magicType:{
						show:true,
						type:['line','bar']
					},
					restore:{show:true},
					saveAsImage:{show:true}
				}
			},
			legend:{
				data:['蒸发量','降水量','平均温度']
			},
			xAxis:[
				{
					type:'category',
					data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
				}
			],
			yAxis:[
				{
					type:'value',
					name:'水量',
					min:0,
					max:250,
					interval:50,
					axisLabel:{formatter:'{value}ml'}
				},
				{
					type:'value',
					name:'温度',
					min:0,
					max:25,
					interval:5,
					axisLabel:{formatter:'{value}°C'}
				}
			],
			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]
				},
				{
					name:'降水量',
					type:'bar',
					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]
				},{
					name:'平均温度',
					type:'line',
					yAxisIndex:1,
					data:[2.0,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23.0,16.5,12.0,6.2]
				}
			]
		};
		//使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

在这里插入图片描述

12.K线图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>K线图</title>
<!--引入echarts.js-->
<script src="js/echarts.min.js"></script>
</head>
<body>
	<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 900px; height: 600px;"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		//指定图表的配置项和数据
		//数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
		var data0 = splitData([
				[ '2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94 ],
				[ '2013/1/25', 2300, 2291.3, 2288.26, 2308.38 ],
				[ '2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92 ],
				[ '2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8 ],
				[ '2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76 ],
				[ '2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82 ],
				[ '2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15 ],
				[ '2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38 ],
				[ '2013/2/5', 2411, 2433.13, 2403.3, 2437.42 ],
				[ '2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73 ],
				[ '2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89 ],
				[ '2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03 ],
				[ '2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8 ],
				[ '2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07 ],
				[ '2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94 ],
				[ '2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82 ],
				[ '2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88 ],
				[ '2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78 ],
				[ '2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71 ],
				[ '2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63 ],
				[ '2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16 ],
				[ '2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65 ],
				[ '2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54 ],
				[ '2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14 ],
				[ '2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44 ],
				[ '2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02 ],
				[ '2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67 ],
				[ '2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96 ],
				[ '2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29 ],
				[ '2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33 ],
				[ '2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22 ],
				[ '2013/3/15', 2269.31, 2278.4, 2250, 2312.08 ],
				[ '2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05 ],
				[ '2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31 ],
				[ '2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86 ],
				[ '2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81 ],
				[ '2013/3/22', 2321.4, 2328.28, 2314.97, 2332 ],
				[ '2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89 ],
				[ '2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99 ],
				[ '2013/3/27', 2299.38, 2301.26, 2289, 2323.48 ],
				[ '2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55 ],
				[ '2013/3/29', 2238.49, 2236.62, 2228.81, 2246.87 ],
				[ '2013/4/1', 2229.46, 2234.4, 2227.31, 2243.95 ],
				[ '2013/4/2', 2234.9, 2227.74, 2220.44, 2253.42 ],
				[ '2013/4/3', 2232.69, 2225.29, 2217.25, 2241.34 ],
				[ '2013/4/8', 2196.24, 2211.59, 2180.67, 2212.59 ],
				[ '2013/4/9', 2215.47, 2225.77, 2215.47, 2234.73 ],
				[ '2013/4/10', 2224.93, 2226.13, 2212.56, 2233.04 ],
				[ '2013/4/11', 2236.98, 2219.55, 2217.26, 2242.48 ],
				[ '2013/4/12', 2218.09, 2206.78, 2204.44, 2226.26 ],
				[ '2013/4/15', 2199.91, 2181.94, 2177.39, 2204.99 ],
				[ '2013/4/16', 2169.63, 2194.85, 2165.78, 2196.43 ],
				[ '2013/4/17', 2195.03, 2193.8, 2178.47, 2197.51 ],
				[ '2013/4/18', 2181.82, 2197.6, 2175.44, 2206.03 ],
				[ '2013/4/19', 2201.12, 2244.64, 2200.58, 2250.11 ],
				[ '2013/4/22', 2236.4, 2242.17, 2232.26, 2245.12 ],
				[ '2013/4/23', 2242.62, 2184.54, 2182.81, 2242.62 ],
				[ '2013/4/24', 2187.35, 2218.32, 2184.11, 2226.12 ],
				[ '2013/4/25', 2213.19, 2199.31, 2191.85, 2224.63 ],
				[ '2013/4/26', 2203.89, 2177.91, 2173.86, 2210.58 ],
				[ '2013/5/2', 2170.78, 2174.12, 2161.14, 2179.65 ],
				[ '2013/5/3', 2179.05, 2205.5, 2179.05, 2222.81 ],
				[ '2013/5/6', 2212.5, 2231.17, 2212.5, 2236.07 ],
				[ '2013/5/7', 2227.86, 2235.57, 2219.44, 2240.26 ],
				[ '2013/5/8', 2242.39, 2246.3, 2235.42, 2255.21 ],
				[ '2013/5/9', 2246.96, 2232.97, 2221.38, 2247.86 ],
				[ '2013/5/10', 2228.82, 2246.83, 2225.81, 2247.67 ],
				[ '2013/5/13', 2247.68, 2241.92, 2231.36, 2250.85 ],
				[ '2013/5/14', 2238.9, 2217.01, 2205.87, 2239.93 ],
				[ '2013/5/15', 2217.09, 2224.8, 2213.58, 2225.19 ],
				[ '2013/5/16', 2221.34, 2251.81, 2210.77, 2252.87 ],
				[ '2013/5/17', 2249.81, 2282.87, 2248.41, 2288.09 ],
				[ '2013/5/20', 2286.33, 2299.99, 2281.9, 2309.39 ],
				[ '2013/5/21', 2297.11, 2305.11, 2290.12, 2305.3 ],
				[ '2013/5/22', 2303.75, 2302.4, 2292.43, 2314.18 ],
				[ '2013/5/23', 2293.81, 2275.67, 2274.1, 2304.95 ],
				[ '2013/5/24', 2281.45, 2288.53, 2270.25, 2292.59 ],
				[ '2013/5/27', 2286.66, 2293.08, 2283.94, 2301.7 ],
				[ '2013/5/28', 2293.4, 2321.32, 2281.47, 2322.1 ],
				[ '2013/5/29', 2323.54, 2324.02, 2321.17, 2334.33 ],
				[ '2013/5/30', 2316.25, 2317.75, 2310.49, 2325.72 ],
				[ '2013/5/31', 2320.74, 2300.59, 2299.37, 2325.53 ],
				[ '2013/6/3', 2300.21, 2299.25, 2294.11, 2313.43 ],
				[ '2013/6/4', 2297.1, 2272.42, 2264.76, 2297.1 ],
				[ '2013/6/5', 2270.71, 2270.93, 2260.87, 2276.86 ],
				[ '2013/6/6', 2264.43, 2242.11, 2240.07, 2266.69 ],
				[ '2013/6/7', 2242.26, 2210.9, 2205.07, 2250.63 ],
				[ '2013/6/13', 2190.1, 2148.35, 2126.22, 2190.1 ] ]);
		function splitData(rawData) {
			var categoryData = [];
			var values = [];
			for (var i = 0; i < rawData.length; i++) {
				categoryData.push(rawData[i].splice(0, 1)[0]);
				values.push(rawData[i])
			}
			return {
				categoryData : categoryData,
				values : values
			};
		}
		function calculateMA(dayCount) {
			var result = [];
			for (var i = 0, len = data0.values.length; i < len; i++) {
				if (i < dayCount) {
					result.push('-');
					continue;
				}
				var sum = 0;
				for (var j = 0; j < dayCount; j++) {
					sum += data0.values[i - j][1];
				}
				result.push(sum / dayCount);
			}
			return result;
		}
		option = {
			title : {
				text : '上证指数',
				left : 0
			},
			tooltip : {
				trigger : 'axis',
				axisPointer : {
					type : 'line'
				}
			},
			legend : {
				data : [ '日K', 'MA5', 'MA10', 'MA20', 'MA30' ]
			},
			grid : {
				left : '10%',
				right : '10%',
				bottom : '15%'
			},
			xAxis : {
				type : 'category',
				data : data0.categoryData,
				scale : true,
				boundaryGap : false,
				axisLine : {
					onZero : false
				},
				splitLine : {
					show : false
				},
				splitNumber : 20,
				min : 'dataMin',
				max : 'dataMax'
			},
			yAxis : {
				scale : true,
				splitArea : {
					show : true
				}
			},
			dataZoom : [ {
				type : 'inside',
				start : 50,
				end : 100
			}, {
				show : true,
				type : 'slider',
				y : '90%',
				start : 50,
				end : 100
			} ],
			series : [
					{
						name : '日K',
						type : 'candlestick',
						data : data0.values,
						markPoint : {
							label : {
								normal : {
									formatter : function(param) {
										return param != null ? Math
												.round(param.value) : '';
									}
								}
							},
							data : [ {
								name : 'XX标点',
								coord : [ '2013/5/31', 2300 ],
								value : 2300,
								itemStyle : {
									normal : {
										color : 'rgb(41,60,85)'
									}
								}
							}, {
								name : 'highestvalue',
								type : 'max',
								valueDim : 'highest'
							}, {
								name : 'lowestvalue',
								type : 'min',
								valueDim : 'lowest'
							}, {
								name : 'averagevalueonclose',
								type : 'average',
								valueDim : 'close'
							} ],
							tooltip : {
								formatter : function(param) {
									return param.name + '<br>'
											+ (param.data.coord || '');
								}
							}
						},
						markLine : {
							symbol : [ 'none', 'none' ],
							data : [ [ {
								name : 'fromlowesttohighest',
								type : 'min',
								valueDim : 'lowest',
								symbol : 'circle',
								symbolSize : 10,
								label : {
									normal : {
										show : false
									},
									emphasis : {
										show : false
									}
								}
							}, {
								type : 'max',
								valueDim : 'highest',
								symbol : 'circle',
								symbolSize : 10,
								label : {
									normal : {
										show : false
									},
									emphasis : {
										show : false
									}
								}
							} ], {
								name : 'minlineonclose',
								type : 'min',
								valueDim : 'close'
							}, {
								name : 'maxlineonclose',
								type : 'max',
								valueDim : 'close'
							} ]
						}
					}, {
						name : 'MA5',
						type : 'line',
						data : calculateMA(5),
						smooth : true,
						lineStyle : {
							normal : {
								opacity : 0.5
							}
						}
					}, {
						name : 'MA10',
						type : 'line',
						data : calculateMA(10),
						smooth : true,
						lineStyle : {
							normal : {
								opacity : 0.5
							}
						}
					}, {
						name : 'MA20',
						type : 'line',
						data : calculateMA(20),
						smooth : true,
						lineStyle : {
							normal : {
								opacity : 0.5
							}
						}
					}, {
						name : 'MA30',
						type : 'line',
						data : calculateMA(30),
						smooth : true,
						lineStyle : {
							normal : {
								opacity : 0.5
							}
						}
					}, ]
		};
		//使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

在这里插入图片描述

13.map地图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>map地图</title>
<!--引入echarts.js-->
<script src="js/echarts.min.js"></script>
<!--使用地图需要引入china.js-->
<script src="js/china.js"></script>
</head>
<body>
	<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 900px; height: 600px;"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		var geoCoordMap = {
			'上海' : [ 121.4648, 31.2891 ],
			'东莞' : [ 113.8953, 22.901 ],
			'东营' : [ 118.7073, 37.5513 ],
			'中山' : [ 113.4229, 22.478 ],
			'临汾' : [ 111.4783, 36.1615 ],
			'临沂' : [ 118.3118, 35.2936 ],
			'丹东' : [ 124.541, 40.4242 ],
			'丽水' : [ 119.5642, 28.1854 ],
			'乌鲁木齐' : [ 87.9236, 43.5883 ],
			'佛山' : [ 112.8955, 23.1097 ],
			'保定' : [ 115.0488, 39.0948 ],
			'兰州' : [ 103.5901, 36.3043 ],
			'包头' : [ 110.3467, 41.4899 ],
			'北京' : [ 116.4551, 40.2539 ],
			'北海' : [ 109.314, 21.6211 ],
			'南京' : [ 118.8062, 31.9208 ],
			'南宁' : [ 108.479, 23.1152 ],
			'南昌' : [ 116.0046, 28.6633 ],
			'南通' : [ 121.1023, 32.1625 ],
			'厦门' : [ 118.1689, 24.6478 ],
			'台州' : [ 121.1353, 28.6688 ],
			'合肥' : [ 117.29, 32.0581 ],
			'呼和浩特' : [ 111.4124, 40.4901 ],
			'咸阳' : [ 108.4131, 34.8706 ],
			'哈尔滨' : [ 127.9688, 45.368 ],
			'唐山' : [ 118.4766, 39.6826 ],
			'嘉兴' : [ 120.9155, 30.6354 ],
			'大同' : [ 113.7854, 39.8035 ],
			'大连' : [ 122.2229, 39.4409 ],
			'天津' : [ 117.4219, 39.4189 ],
			'太原' : [ 112.3352, 37.9413 ],
			'威海' : [ 121.9482, 37.1393 ],
			'宁波' : [ 121.5967, 29.6466 ],
			'宝鸡' : [ 107.1826, 34.3433 ],
			'宿迁' : [ 118.5535, 33.7775 ],
			'常州' : [ 119.4543, 31.5582 ],
			'广州' : [ 113.5107, 23.2196 ],
			'廊坊' : [ 116.521, 39.0509 ],
			'延安' : [ 109.1052, 36.4252 ],
			'张家口' : [ 115.1477, 40.8527 ],
			'徐州' : [ 117.5208, 34.3268 ],
			'德州' : [ 116.6858, 37.2107 ],
			'惠州' : [ 114.6204, 23.1647 ],
			'成都' : [ 103.9526, 30.7617 ],
			'扬州' : [ 119.4653, 32.8162 ],
			'承德' : [ 117.5757, 41.4075 ],
			'拉萨' : [ 91.1865, 30.1465 ],
			'无锡' : [ 120.3442, 31.5527 ],
			'日照' : [ 119.2786, 35.5023 ],
			'昆明' : [ 102.9199, 25.4663 ],
			'杭州' : [ 119.5313, 29.8773 ],
			'枣庄' : [ 117.323, 34.8926 ],
			'柳州' : [ 109.3799, 24.9774 ],
			'株洲' : [ 113.5327, 27.0319 ],
			'武汉' : [ 114.3896, 30.6628 ],
			'汕头' : [ 117.1692, 23.3405 ],
			'江门' : [ 112.6318, 22.1484 ],
			'沈阳' : [ 123.1238, 42.1216 ],
			'沧州' : [ 116.8286, 38.2104 ],
			'河源' : [ 114.917, 23.9722 ],
			'泉州' : [ 118.3228, 25.1147 ],
			'泰安' : [ 117.0264, 36.0516 ],
			'泰州' : [ 120.0586, 32.5525 ],
			'济南' : [ 117.1582, 36.8701 ],
			'济宁' : [ 116.8286, 35.3375 ],
			'海口' : [ 110.3893, 19.8516 ],
			'淄博' : [ 118.0371, 36.6064 ],
			'淮安' : [ 118.927, 33.4039 ],
			'深圳' : [ 114.5435, 22.5439 ],
			'清远' : [ 112.9175, 24.3292 ],
			'温州' : [ 120.498, 27.8119 ],
			'渭南' : [ 109.7864, 35.0299 ],
			'湖州' : [ 119.8608, 30.7782 ],
			'湘潭' : [ 112.5439, 27.7075 ],
			'滨州' : [ 117.8174, 37.4963 ],
			'潍坊' : [ 119.0918, 36.524 ],
			'烟台' : [ 120.7397, 37.5128 ],
			'玉溪' : [ 101.9312, 23.8898 ],
			'珠海' : [ 113.7305, 22.1155 ],
			'盐城' : [ 120.2234, 33.5577 ],
			'盘锦' : [ 121.9482, 41.0449 ],
			'石家庄' : [ 114.4995, 38.1006 ],
			'福州' : [ 119.4543, 25.9222 ],
			'秦皇岛' : [ 119.2126, 40.0232 ],
			'绍兴' : [ 120.564, 29.7565 ],
			'聊城' : [ 115.9167, 36.4032 ],
			'肇庆' : [ 112.1265, 23.5822 ],
			'舟山' : [ 122.2559, 30.2234 ],
			'苏州' : [ 120.6519, 31.3989 ],
			'莱芜' : [ 117.6526, 36.2714 ],
			'菏泽' : [ 115.6201, 35.2057 ],
			'营口' : [ 122.4316, 40.4297 ],
			'葫芦岛' : [ 120.1575, 40.578 ],
			'衡水' : [ 115.8838, 37.7161 ],
			'衢州' : [ 118.6853, 28.8666 ],
			'西宁' : [ 101.4038, 36.8207 ],
			'西安' : [ 109.1162, 34.2004 ],
			'贵阳' : [ 106.6992, 26.7682 ],
			'连云港' : [ 119.1248, 34.552 ],
			'邢台' : [ 114.8071, 37.2821 ],
			'邯郸' : [ 114.4775, 36.535 ],
			'郑州' : [ 113.4668, 34.6234 ],
			'鄂尔多斯' : [ 108.9734, 39.2487 ],
			'重庆' : [ 107.7539, 30.1904 ],
			'金华' : [ 120.0037, 29.1028 ],
			'铜川' : [ 109.0393, 35.1947 ],
			'银川' : [ 106.3586, 38.1775 ],
			'镇江' : [ 119.4763, 31.9702 ],
			'长春' : [ 125.8154, 44.2584 ],
			'长沙' : [ 113.0823, 28.2568 ],
			'长治' : [ 112.8625, 36.4746 ],
			'阳泉' : [ 113.4778, 38.0951 ],
			'青岛' : [ 120.4651, 36.3373 ],
			'韶关' : [ 113.7964, 24.7028 ]
		};
		var BJData = [ 
		[ 
			{
				name : '北京'
			}, 
			{
				name : '上海',
				value : 95
			} 
		],
		[ {
			name : '北京'
		}, {
			name : '广州',
			value : 90
		} ], [ {
			name : '北京'
		}, {
			name : '大连',
			value : 80
		} ], [ {
			name : '北京'
		}, {
			name : '南宁',
			value : 70
		} ], [ {
			name : '北京'
		}, {
			name : '南昌',
			value : 60
		} ], [ {
			name : '北京'
		}, {
			name : '拉萨',
			value : 50
		} ], [ {
			name : '北京'
		}, {
			name : '长春',
			value : 40
		} ], [ {
			name : '北京'
		}, {
			name : '包头',
			value : 30
		} ], [ {
			name : '北京'
		}, {
			name : '重庆',
			value : 20
		} ], [ {
			name : '北京'
		}, {
			name : '常州',
			value : 10
		} ] ];
		var SHData = [ [ {
			name : '上海'
		}, {
			name : '包头',
			value : 95
		} ], [ {
			name : '上海'
		}, {
			name : '昆明',
			value : 90
		} ], [ {
			name : '上海'
		}, {
			name : '广州',
			value : 80
		} ], [ {
			name : '上海'
		}, {
			name : '郑州',
			value : 70
		} ], [ {
			name : '上海'
		}, {
			name : '长春',
			value : 60
		} ], [ {
			name : '上海'
		}, {
			name : '重庆',
			value : 50
		} ], [ {
			name : '上海'
		}, {
			name : '长沙',
			value : 40
		} ], [ {
			name : '上海'
		}, {
			name : '北京',
			value : 30
		} ], [ {
			name : '上海'
		}, {
			name : '丹东',
			value : 20
		} ], [ {
			name : '上海'
		}, {
			name : '大连',
			value : 10
		} ] ];
		var GZData = [ [ {
			name : '广州'
		}, {
			name : '福州',
			value : 95
		} ], [ {
			name : '广州'
		}, {
			name : '太原',
			value : 90
		} ], [ {
			name : '广州'
		}, {
			name : '长春',
			value : 80
		} ], [ {
			name : '广州'
		}, {
			name : '重庆',
			value : 70
		} ], [ {
			name : '广州'
		}, {
			name : '西安',
			value : 60
		} ], [ {
			name : '广州'
		}, {
			name : '成都',
			value : 50
		} ], [ {
			name : '广州'
		}, {
			name : '常州',
			value : 40
		} ], [ {
			name : '广州'
		}, {
			name : '北京',
			value : 30
		} ], [ {
			name : '广州'
		}, {
			name : '北海',
			value : 20
		} ], [ {
			name : '广州'
		}, {
			name : '海口',
			value : 10
		} ] ];
		var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
		var convertData = function(data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				var dataItem = data[i];
				var fromCoord = geoCoordMap[dataItem[0].name];
				var toCoord = geoCoordMap[dataItem[1].name];
				if (fromCoord && toCoord) {
					res.push([ {
						name : dataItem[0].name,
						coord : fromCoord
					}, {
						name : dataItem[1].name,
						coord : toCoord
					} ]);
				}
			}
			return res;
		};
		var color = [ '#a6c84c', '#ffa022', '#46bee9' ];
		var series = [];
		[ [ '北京', BJData ], [ '上海', SHData ], [ '广州', GZData ] ]
				.forEach(function(item, i) {
					series.push({
						name : item[0] + 'Top10',
						type : 'lines',
						zlevel : 1,
						effect : {
							show : true,
							period : 6,
							trailLength : 0.7,
							color : '#fff',
							symbolSize : 3
						},
						lineStyle : {
							normal : {
								color : color[i],
								width : 0,
								curveness : 0.2
							}
						},
						data : convertData(item[1])
					}, {
						name : item[0] + 'Top10',
						type : 'lines',
						zlevel : 2,
						effect : {
							show : true,
							period : 6,
							trailLength : 0,
							symbol : planePath,
							symbolSize : 15
						},
						lineStyle : {
							normal : {}
						},
						data : convertData(item[1])
					}, {
						name : item[0] + 'Top10',
						type : 'effectScatter',
						coordinateSystem : 'geo',
						zlevel : 2,
						rippleEffect : {
							brushType : 'stroke'
						},
						label : {
							normal : {
								show : true,
								position : 'right',
								formatter : '{b}'
							}
						},
						symbolSize : function(val) {
							return val[2] / 8;
						},
						itemStyle : {
							normal : {
								color : color[i]
							}
						},
						data : item[1].map(function(dataItem) {
							return {
								name : dataItem[1].name,
								value : geoCoordMap[dataItem[1].name]
										.concat([ dataItem[1].value ])
							};
						})
					});
				});
		option = {
			backgroundColor : '#404a59',
			title : {
				text : '模拟迁徙',
				subtext : '虚拟数据',
				left : 'center',
				textStyle : {
					color : '#fff'
				}
			},
			tooltip : {
				trigger : 'item'
			},
			legend : {
				orient : 'vertical',
				top : 'bottom',
				left : 'right',
				data : [ '北京Top10', '上海Top10', '广州Top10' ],
				textStyle : {
					color : '#fff'
				},
				selectedMode : 'single'
			},
			geo : {
				map : 'china',
				label : {
					emphasis : {
						show : false
					}
				},
				roam : true,
				itemStyle : {
					normal : {
						areaColor : '#323c48',
						borderColor : '#404a59'
					},
					emphasis : {
						areaColor : '#2a333d'
					}
				}
			},
			series : series
		};
		//使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

在这里插入图片描述

14.值域选择

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dataRange值域选择</title>
<!--引入echarts.js-->
<script src="js/echarts.min.js"></script>
<!--引入china.js-->
<script src="js/china.js"></script>
</head>
<body>
	<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 900px; height: 600px;"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));//指定图表的配置项和数据
		var geoCoordMap = {
			"海门" : [ 121.15, 31.89 ],
			"鄂尔多斯" : [ 109.781327, 39.608266 ],
			"招远" : [ 120.38, 37.35 ],
			"舟山" : [ 122.207216, 29.985295 ],
			"齐齐哈尔" : [ 123.97, 47.33 ],
			"盐城" : [ 120.13, 33.38 ],
			"赤峰" : [ 118.87, 42.28 ],
			"青岛" : [ 120.33, 36.07 ],
			"即墨" : [ 120.45, 36.38 ],
			"抚顺" : [ 123.97, 41.97 ],
			"玉溪" : [ 102.52, 24.35 ],
			"张家口" : [ 114.87, 40.82 ],
			"阳泉" : [ 113.57, 37.85 ],
			"莱州" : [ 119.942327, 37.177017 ],
			"湖州" : [ 120.1, 30.86 ],
			"汕头" : [ 116.69, 23.39 ],
			"昆山" : [ 120.95, 31.39 ],
			"宁波" : [ 121.56, 29.86 ],
			"湛江" : [ 110.359377, 21.270708 ],
			"揭阳" : [ 116.35, 23.55 ],
			"荣成" : [ 122.41, 37.16 ],
			"连云港" : [ 119.16, 34.59 ],
			"葫芦岛" : [ 120.836932, 40.711052 ],
			"常熟" : [ 120.74, 31.64 ],
			"东莞" : [ 113.75, 23.04 ],
			"河源" : [ 114.68, 23.73 ],
			"淮安" : [ 119.15, 33.5 ],
			"泰州" : [ 119.9, 32.49 ],
			"南宁" : [ 108.33, 22.84 ],
			"营口" : [ 122.18, 40.65 ],
			"惠州" : [ 114.4, 23.09 ],
			"江阴" : [ 120.26, 31.91 ],
			"蓬莱" : [ 120.75, 37.8 ],
			"韶关" : [ 113.62, 24.84 ],
			"嘉峪关" : [ 98.289152, 39.77313 ],
			"广州" : [ 113.23, 23.16 ],
			"延安" : [ 109.47, 36.6 ],
			"太原" : [ 112.53, 37.87 ],
			"清远" : [ 113.01, 23.7 ],
			"中山" : [ 113.38, 22.52 ],
			"昆明" : [ 102.73, 25.04 ],
			"寿光" : [ 118.73, 36.86 ],
			"盘锦" : [ 122.070714, 41.119997 ],
			"长治" : [ 113.08, 36.18 ],
			"深圳" : [ 114.07, 22.62 ],
			"珠海" : [ 113.52, 22.3 ],
			"宿迁" : [ 118.3, 33.96 ],
			"咸阳" : [ 108.72, 34.36 ],
			"铜川" : [ 109.11, 35.09 ],
			"平度" : [ 119.97, 36.77 ],
			"佛山" : [ 113.11, 23.05 ],
			"海口" : [ 110.35, 20.02 ],
			"江门" : [ 113.06, 22.61 ],
			"章丘" : [ 117.53, 36.72 ],
			"肇庆" : [ 112.44, 23.05 ],
			"大连" : [ 121.62, 38.92 ],
			"临汾" : [ 111.5, 36.08 ],
			"吴江" : [ 120.63, 31.16 ],
			"石嘴山" : [ 106.39, 39.04 ],
			"沈阳" : [ 123.38, 41.8 ],
			"苏州" : [ 120.62, 31.32 ],
			"茂名" : [ 110.88, 21.68 ],
			"嘉兴" : [ 120.76, 30.77 ],
			"长春" : [ 125.35, 43.88 ],
			"胶州" : [ 120.03336, 36.264622 ],
			"银川" : [ 106.27, 38.47 ],
			"张家港" : [ 120.555821, 31.875428 ],
			"三门峡" : [ 111.19, 34.76 ],
			"锦州" : [ 121.15, 41.13 ],
			"南昌" : [ 115.89, 28.68 ],
			"柳州" : [ 109.4, 24.33 ],
			"三亚" : [ 109.511909, 18.252847 ],
			"自贡" : [ 104.778442, 29.33903 ],
			"吉林" : [ 126.57, 43.87 ],
			"阳江" : [ 111.95, 21.85 ],
			"泸州" : [ 105.39, 28.91 ],
			"西宁" : [ 101.74, 36.56 ],
			"宜宾" : [ 104.56, 29.77 ],
			"呼和浩特" : [ 111.65, 40.82 ],
			"成都" : [ 104.06, 30.67 ],
			"马鞍山" : [ 118.48, 31.56 ],
			"宝鸡" : [ 107.15, 34.38 ],
			"焦作" : [ 113.21, 35.24 ],
			"句容" : [ 119.16, 31.95 ],
			"北京" : [ 116.46, 39.92 ],
			"徐州" : [ 117.2, 34.26 ],
			"衡水" : [ 115.72, 37.72 ],
			"包头" : [ 110, 40.58 ],
			"绵阳" : [ 104.73, 31.48 ],
			"乌鲁木齐" : [ 87.68, 43.77 ],
			"枣庄" : [ 117.57, 34.86 ],
			"杭州" : [ 120.19, 30.26 ],
			"淄博" : [ 118.05, 36.78 ],
			"鞍山" : [ 122.85, 41.12 ],
			"溧阳" : [ 119.48, 31.43 ],
			"库尔勒" : [ 86.06, 41.68 ],
			"安阳" : [ 114.35, 36.1 ],
			"开封" : [ 114.35, 34.79 ],
			"济南" : [ 117, 36.65 ],
			"德阳" : [ 104.37, 31.13 ],
			"温州" : [ 120.65, 28.01 ],
			"九江" : [ 115.97, 29.71 ],
			"邯郸" : [ 114.47, 36.6 ],
			"临安" : [ 119.72, 30.23 ],
			"兰州" : [ 103.73, 36.03 ],
			"沧州" : [ 116.83, 38.33 ],
			"临沂" : [ 118.35, 35.05 ],
			"南充" : [ 106.110698, 30.837793 ],
			"天津" : [ 117.2, 39.13 ],
			"富阳" : [ 119.95, 30.07 ],
			"泰安" : [ 117.13, 36.18 ],
			"诸暨" : [ 120.23, 29.71 ],
			"郑州" : [ 113.65, 34.76 ],
			"哈尔滨" : [ 126.63, 45.75 ],
			"聊城" : [ 115.97, 36.45 ],
			"芜湖" : [ 118.38, 31.33 ],
			"唐山" : [ 118.02, 39.63 ],
			"平顶山" : [ 113.29, 33.75 ],
			"邢台" : [ 114.48, 37.05 ],
			"德州" : [ 116.29, 37.45 ],
			"济宁" : [ 116.59, 35.38 ],
			"荆州" : [ 112.239741, 30.335165 ],
			"宜昌" : [ 111.3, 30.7 ],
			"义乌" : [ 120.06, 29.32 ],
			"丽水" : [ 119.92, 28.45 ],
			"洛阳" : [ 112.44, 34.7 ],
			"秦皇岛" : [ 119.57, 39.95 ],
			"株洲" : [ 113.16, 27.83 ],
			"石家庄" : [ 114.48, 38.03 ],
			"莱芜" : [ 117.67, 36.19 ],
			"常德" : [ 111.69, 29.05 ],
			"保定" : [ 115.48, 38.85 ],
			"湘潭" : [ 112.91, 27.87 ],
			"金华" : [ 119.64, 29.12 ],
			"岳阳" : [ 113.09, 29.37 ],
			"长沙" : [ 113, 28.21 ],
			"衢州" : [ 118.88, 28.97 ],
			"廊坊" : [ 116.7, 39.53 ],
			"菏泽" : [ 115.480656, 35.23375 ],
			"合肥" : [ 117.27, 31.86 ],
			"武汉" : [ 114.31, 30.52 ],
			"大庆" : [ 125.03, 46.58 ]
		};
		var convertData = function(data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				var geoCoord = geoCoordMap[data[i].name];
				if (geoCoord) {
					res.push({
						name : data[i].name,
						value : geoCoord.concat(data[i].value)
					});
				}
			}
			return res;
		};
		option = {
			backgroundColor : '#404a59',
			//标题
			title : {
				text : '全国主要城市空气质量',
				subtext : 'datafromPM25.in',
				sublink : 'http://www.pm25.in',
				x : 'center',
				textStyle : {
					color : '#fff'
				}
			},//弹窗
			tooltip : {
				trigger : 'item',
				formatter : function(params) {
					return params.name + ':' + params.value[2];
				}
			},
			//图例
			legend : {
				orient : 'vertical',
				y : 'bottom',
				x : 'right',
				data : [ 'pm2.5' ],
				textStyle : {
					color : '#fff'
				}
			},
			//值域选择
			dataRange : {
				//最小是0
				min : 0,
				//最大是300
				max : 300,
				//是否可计算
				calculable : true,
				//最小值和最大值渐变的颜色区间
				color : [ '#d94e5d', '#eac736', '#50a3ba' ],
				//文字样式
				textStyle : {
					color : '#fff'
				}
			},
			geo : {
				map : 'china',
				label : {
					emphasis : {
						show : false
					}
				},
				itemStyle : {
					normal : {
						areaColor : '#323c48',
						borderColor : '#111'
					},
					emphasis : {
						areaColor : '#2a333d'
					}
				}
			},
			series : [ {
				name : 'pm2.5',
				type : 'scatter',
				coordinateSystem : 'geo',
				data : convertData([ {
					name : "海门",
					value : 9
				}, {
					name : "鄂尔多斯",
					value : 12
				}, {
					name : "招远",
					value : 12
				}, {
					name : "舟山",
					value : 12
				}, {
					name : "齐齐哈尔",
					value : 14
				}, {
					name : "盐城",
					value : 15
				}, {
					name : "赤峰",
					value : 16
				}, {
					name : "青岛",
					value : 18
				}, {
					name : "乳山",
					value : 18
				}, {
					name : "金昌",
					value : 19
				}, {
					name : "泉州",
					value : 21
				}, {
					name : "莱西",
					value : 21
				}, {
					name : "日照",
					value : 21
				}, {
					name : "胶南",
					value : 22
				}, {
					name : "南通",
					value : 23
				}, {
					name : "拉萨",
					value : 24
				}, {
					name : "云浮",
					value : 24
				}, {
					name : "梅州",
					value : 25
				}, {
					name : "文登",
					value : 25
				}, {
					name : "上海",
					value : 25
				}, {
					name : "攀枝花",
					value : 25
				}, {
					name : "威海",
					value : 25
				}, {
					name : "承德",
					value : 25
				}, {
					name : "厦门",
					value : 26
				}, {
					name : "汕尾",
					value : 26
				}, {
					name : "潮州",
					value : 26
				}, {
					name : "丹东",
					value : 27
				}, {
					name : "太仓",
					value : 27
				}, {
					name : "曲靖",
					value : 27
				}, {
					name : "烟台",
					value : 28
				}, {
					name : "福州",
					value : 29
				}, {
					name : "瓦房店",
					value : 30
				}, {
					name : "即墨",
					value : 30
				}, {
					name : "抚顺",
					value : 31
				}, {
					name : "玉溪",
					value : 31
				}, {
					name : "张家口",
					value : 31
				}, {
					name : "阳泉",
					value : 31
				}, {
					name : "莱州",
					value : 32
				}, {
					name : "湖州",
					value : 32
				}, {
					name : "汕头",
					value : 32
				}, {
					name : "昆山",
					value : 33
				}, {
					name : "宁波",
					value : 33
				}, {
					name : "湛江",
					value : 33
				}, {
					name : "揭阳",
					value : 34
				}, {
					name : "荣成",
					value : 34
				}, {
					name : "连云港",
					value : 35
				}, {
					name : "葫芦岛",
					value : 35
				}, {
					name : "常熟",
					value : 36
				}, {
					name : "东莞",
					value : 36
				}, {
					name : "河源",
					value : 36
				}, {
					name : "淮安",
					value : 36
				}, {
					name : "泰州",
					value : 36
				}, {
					name : "南宁",
					value : 37
				}, {
					name : "营口",
					value : 37
				}, {
					name : "惠州",
					value : 37
				}, {
					name : "江阴",
					value : 37
				}, {
					name : "蓬莱",
					value : 37
				}, {
					name : "韶关",
					value : 38
				}, {
					name : "嘉峪关",
					value : 38
				}, {
					name : "广州",
					value : 38
				}, {
					name : "延安",
					value : 38
				}, {
					name : "太原",
					value : 39
				}, {
					name : "清远",
					value : 39
				}, {
					name : "中山",
					value : 39
				}, {
					name : "昆明",
					value : 39
				}, {
					name : "寿光",
					value : 40
				}, {
					name : "盘锦",
					value : 40
				}, {
					name : "长治",
					value : 41
				}, {
					name : "深圳",
					value : 41
				}, {
					name : "珠海",
					value : 42
				}, {
					name : "宿迁",
					value : 43
				}, {
					name : "咸阳",
					value : 43
				}, {
					name : "铜川",
					value : 44
				}, {
					name : "平度",
					value : 44
				}, {
					name : "佛山",
					value : 44
				}, {
					name : "海口",
					value : 44
				}, {
					name : "江门",
					value : 45
				}, {
					name : "章丘",
					value : 45
				}, {
					name : "肇庆",
					value : 46
				}, {
					name : "大连",
					value : 47
				}, {
					name : "临汾",
					value : 47
				}, {
					name : "吴江",
					value : 47
				}, {
					name : "石嘴山",
					value : 49
				}, {
					name : "沈阳",
					value : 50
				}, {
					name : "苏州",
					value : 50
				}, {
					name : "茂名",
					value : 50
				}, {
					name : "嘉兴",
					value : 51
				}, {
					name : "长春",
					value : 51
				}, {
					name : "胶州",
					value : 52
				}, {
					name : "银川",
					value : 52
				}, {
					name : "张家港",
					value : 52
				}, {
					name : "三门峡",
					value : 53
				}, {
					name : "锦州",
					value : 54
				}, {
					name : "南昌",
					value : 54
				}, {
					name : "柳州",
					value : 54
				}, {
					name : "三亚",
					value : 54
				}, {
					name : "自贡",
					value : 56
				}, {
					name : "吉林",
					value : 56
				}, {
					name : "阳江",
					value : 57
				}, {
					name : "泸州",
					value : 57
				}, {
					name : "西宁",
					value : 57
				}, {
					name : "宜宾",
					value : 58
				}, {
					name : "呼和浩特",
					value : 58
				}, {
					name : "成都",
					value : 58
				}, {
					name : "大同",
					value : 58
				}, {
					name : "镇江",
					value : 59
				}, {
					name : "桂林",
					value : 59
				}, {
					name : "张家界",
					value : 59
				}, {
					name : "宜兴",
					value : 59
				}, {
					name : "北海",
					value : 60
				}, {
					name : "西安",
					value : 61
				}, {
					name : "金坛",
					value : 62
				}, {
					name : "东营",
					value : 62
				}, {
					name : "牡丹江",
					value : 63
				}, {
					name : "遵义",
					value : 63
				}, {
					name : "绍兴",
					value : 63
				}, {
					name : "扬州",
					value : 64
				}, {
					name : "常州",
					value : 64
				}, {
					name : "潍坊",
					value : 65
				}, {
					name : "重庆",
					value : 66
				}, {
					name : "台州",
					value : 67
				}, {
					name : "南京",
					value : 67
				}, {
					name : "滨州",
					value : 70
				}, {
					name : "贵阳",
					value : 71
				}, {
					name : "无锡",
					value : 71
				}, {
					name : "本溪",
					value : 71
				}, {
					name : "克拉玛依",
					value : 72
				}, {
					name : "渭南",
					value : 72
				}, {
					name : "马鞍山",
					value : 72
				}, {
					name : "宝鸡",
					value : 72
				}, {
					name : "焦作",
					value : 75
				}, {
					name : "句容",
					value : 75
				}, {
					name : "北京",
					value : 79
				}, {
					name : "徐州",
					value : 79
				}, {
					name : "衡水",
					value : 80
				}, {
					name : "包头",
					value : 80
				}, {
					name : "绵阳",
					value : 80
				}, {
					name : "乌鲁木齐",
					value : 84
				}, {
					name : "枣庄",
					value : 84
				}, {
					name : "杭州",
					value : 84
				}, {
					name : "淄博",
					value : 85
				}, {
					name : "鞍山",
					value : 86
				}, {
					name : "溧阳",
					value : 86
				}, {
					name : "库尔勒",
					value : 86
				}, {
					name : "安阳",
					value : 90
				}, {
					name : "开封",
					value : 90
				}, {
					name : "济南",
					value : 92
				}, {
					name : "德阳",
					value : 93
				}, {
					name : "温州",
					value : 95
				}, {
					name : "九江",
					value : 96
				}, {
					name : "邯郸",
					value : 98
				}, {
					name : "临安",
					value : 99
				}, {
					name : "兰州",
					value : 99
				}, {
					name : "沧州",
					value : 100
				}, {
					name : "临沂",
					value : 103
				}, {
					name : "南充",
					value : 104
				}, {
					name : "天津",
					value : 105
				}, {
					name : "富阳",
					value : 106
				}, {
					name : "泰安",
					value : 112
				}, {
					name : "诸暨",
					value : 112
				}, {
					name : "郑州",
					value : 113
				}, {
					name : "哈尔滨",
					value : 114
				}, {
					name : "聊城",
					value : 116
				}, {
					name : "芜湖",
					value : 117
				}, {
					name : "唐山",
					value : 119
				}, {
					name : "平顶山",
					value : 119
				}, {
					name : "邢台",
					value : 119
				}, {
					name : "德州",
					value : 120
				}, {
					name : "济宁",
					value : 120
				}, {
					name : "荆州",
					value : 127
				}, {
					name : "宜昌",
					value : 130
				}, {
					name : "义乌",
					value : 132
				}, {
					name : "丽水",
					value : 133
				}, {
					name : "洛阳",
					value : 134
				}, {
					name : "秦皇岛",
					value : 136
				}, {
					name : "株洲",
					value : 143
				}, {
					name : "石家庄",
					value : 147
				}, {
					name : "莱芜",
					value : 148
				}, {
					name : "常德",
					value : 152
				}, {
					name : "保定",
					value : 153
				}, {
					name : "湘潭",
					value : 154
				}, {
					name : "金华",
					value : 157
				}, {
					name : "岳阳",
					value : 169
				}, {
					name : "长沙",
					value : 175
				}, {
					name : "衢州",
					value : 177
				}, {
					name : "廊坊",
					value : 193
				}, {
					name : "菏泽",
					value : 194
				}, {
					name : "合肥",
					value : 229
				}, {
					name : "武汉",
					value : 273
				}, {
					name : "大庆",
					value : 279
				} ]),
				symbolSize : 12,
				label : {
					normal : {
						show : false
					},
					emphasis : {
						show : false
					}
				},
				itemStyle : {
					emphasis : {
						borderColor : '#fff',
						borderWidth : 1
					}
				}
			} ]
		}
		//使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

在这里插入图片描述

15.进口贸易

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>line</title>
	<!--引入echarts.js-->
	<script src="js/echarts.min.js"></script>
	<!--引入vintage主题的js文件-->
	<script src='js/vintage.js'></script>
	<!-- 引入infographic主题的js文件 -->
	<script src="js/infographic.js"></script>
</head>
<body>
	<!--为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main" style="width: 900px; height: 600px;"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		//使用主题需要在echartsinit的时候第二个参数指定前面引入的vintage主题
		var myChart = echarts.init(document.getElementById('main'), 'vintage');
		//var myChart = echarts.init(document.getElementById('main'), 'infographic');
		//指定图表的配置项和数据
		var option = {
			title : {
				text : '进口贸易额'
			},
			toolbox : {
				show : true,
				feature : {
					saveAsImage : {
						show : true
					}
				}
			},
			legend : {
				data : [ '贸易额' ]
			},
			xAxis : {
				data : [ "2010", "2011", "2012", "2013", "2014", "2015",
						"2016", "2017" ]
			},
			yAxis : {},
			series : [ {
				name : '贸易额',
				type : 'bar',
				data : [ 1.6, 2.3, 3.1, 4.06, 5.3, 5.84, 6.5, 7.2 ]
			}, {
				name : '增长率',
				type : 'line',
				data : [ 31.5, 36.7, 42.4, 45.8, 38.1, 39.6, 40.1, 35.2 ]
			} ]
		};
		//使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

在这里插入图片描述

_胡杨_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
数据可视化-鸢尾花.docx
05-26
数据可视化是一种将复杂的数据集转化为易于理解的图形或图像的过程，它可以帮助我们更好地发现数据中的模式、趋势和关联。在本实验中，我们利用ECharts这个JavaScript库来实现鸢尾花数据的可视化，ECharts是一个高效...
一个数据可视化实战例子
04-22
一个数据可视化实战例子，包含数据和源码，了解背景与目标 --了解背景 -- --- 熟悉数据情况------ 熟悉项目流程 ---- 读取与处理新零售智能数据 ---- 读取数据 --- 清洗数据------规约数据----- 绘制可视化图形-----...
使用D3.js进行数据可视化
正在加载中
12-19 4300
楼主最近在做一个将特定图结构的数据进行可视化的项目，用到了前段可视化库D3.js，在这里分享一下学习心得。 QuickStart html> title>title> script src="https://d3js.org/d3.v4.min.js">script> style > div.bar { display: inline-block;
Python爬虫以及数据可视化分析
三明治的博客
12-25 8万+
Python爬虫以及数据可视化分析之B站动漫排行榜信息爬取分析 简书地址：https://www.jianshu.com/u/40ac87350697 简单几步，通过Python对B站番剧排行数据进行爬取，并进行可视化分析 源码文件可以参考Github上传的项目：https://github.com/Lemon-Sheep/Py/tree/master 下面，我们开始吧！ PS: 作为Python爬虫初学者，如有不正确的地方，望各路大神不吝赐教[抱拳] 本项目将会对B站番剧排行的数据进行网页信息爬取以及
ECharts实现数据可视化入门教程（超详细）
热门推荐
『愚』的博客
02-20 18万+
ECharts实现数据可视化入门教程（超详细）ECharts介绍ECharts入门教程第一步：下载并引入scharts.js文件第二步：编写代码目录结构编写index.html代码效果展示ECharts的基础配置主要配置（常用的）案例讲解 ECharts介绍 官网链接：Apache ECharts ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢
数据分析案例-顾客购物数据可视化分析
m0_64336780的博客
10-22 1万+
本项目旨在通过数据可视化技术，对顾客购物数据进行深入挖掘和分析，为商家提供全面的市场分析和商业洞察。通过使用先进的数据可视化工具和技术，我们将从大量的顾客购物数据中提取有价值的信息，并通过直观的图形展示出来，帮助商家更好地理解市场和消费者行为，优化商业决策。
D3 数据可视化的简单例子
你好邱林和的专栏
01-16 4619
D3.js可以很好地展示数据，并绘制成各种表格，一个简单例子如下： 做一个简单的图表 var width = 300; //画布的宽度 var height = 300; //画布的高度 var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个
Python数据可视化小结
sgzqc的专栏
05-20 3541
通过数据可视化工具来取得引人注目的效果。这是关于了解数据背后隐藏的信息，通过了解受众，并不断接收和实施反馈，以不断改进可视化效果。本文一步一步通过具体数据例子来讲解了如何取得引入注目的可视化效果的完整步骤，并给出了相应的代码示例。您学废了嘛？
数据可视化的介绍
qq_44308961的博客
02-26 1752
数据可视化
实例教学：使用 D3.js 实现数据可视化
思过留痕
02-13 4780
转自知乎 实例教学：使用 D3.js 实现数据可视化kmokidd2 年前原文链接：Learn to Create D3.js Data Visualizations by Example基于 D3.js ，编写 HTML、SVG 和 CSS 就能让你的数据变得生动起来，这是一个基于数据操作 DOM 的 JavaScript 库。在我看来，每一位 Web 开发者最应该学习的三个 JavaScri...
python数据可视化例子
鲍鲍
11-04 5554
使用python可以方便的实现数据可视化，下面是两个例子，这些例子是跟着《python编程：从入门到实践》做的，这其中的csv文件与json文件，下载地址。在该网址中点击右侧随书下载，然后下载源代码文件。csv文件：在源代码文件中，打开chapter_16->data->sitka_weather_2018_full.csv并将该csv文件放到代码所在目录中。 2018年阿拉斯加州锡特卡天气的可视化 效果图： csv文件：在刚才下载的源代码文件中，打开chapter_16->dat..
基于Echarts2.X的地图数据可视化指南
夜郎King的博客
06-29 1万+
本文将基于Echarts2.2.7版本，重点讲解如何使用Html5和JavaScript进行Echarts地图开发，同时在地图上集成时间轴和数值展示，最后提供一个极简的集成实例，通过实例运行掌握实际开发，通过Echarts的地图组件来完成数据的地理可视化
数据可视化h5编写源码.rar
12-25
这是我博文《数据可视化之模块边框绘制，以及组件开发（一）》中的学习过程源码
数据可视化大屏数据显示模板html.zip
05-27
数据可视化大屏数据显示模板html。包含：智慧医疗/大数据医疗。智慧运维可视化监控管理大屏模板。智慧城市。智慧运维可视化监控管理大屏模板。智慧政务。智慧运维可视化监控管理大屏模板。智慧气象/气象预报大数据...
wxPython绘图模块wxPyPlot实现数据可视化
09-18
在Python编程环境中，数据可视化是十分重要的，它可以帮助我们更好地理解和解释数据。wxPython是一个流行的图形用户界面（GUI）工具包，它允许开发者创建原生跨平台的应用程序。而wxPyPlot则是wxPython中的一个绘图...
数据可视化教学代码和案例（python+jupyter）
06-01
数据可视化的教学代码： 包括折线图+柱状图+饼图+盒图+散点图+直方图+3d图 画布的布局、画图中中文乱码的解决、背景板的选择等 简单的数据分析和可视化案例： titanic数据的简单分析可视化 iris数据的聚类可视化 GDP...
数据可视化技术应用-Excel函数.pptx
02-16
数据可视化技术在现代信息社会中扮演着至关重要的角色，尤其在数据分析和决策支持方面。Excel作为一款广泛使用的电子表格软件，其强大的数据处理和可视化能力使得它成为数据可视化的首选工具之一。本节我们将深入...
python爬虫数据可视化.pdf
11-18
python爬虫数据可视化 在这个例子中，我们首先定义了一个`data`字典，其中包含了爬取到的水果名称和数量数据。然后，我们将数据拆分为两个列表：`fruits`和`quantities`。接下来，使用`plt.bar()`函数创建了一个...
MATLAB数据可视化代码例子
最新发布
06-01
MATLAB提供了多种数据可视化工具和函数，可以帮助你创建图表和图形,附件一些常用的数据可视化代码示例 绘制简单的折线图，绘制条形图，绘制散点图，绘制柱状图，绘制饼图，绘制三维图，绘制直方图，绘制箱型图 这些...
动态数据可视化excel 例子
05-11
以下是一个动态数据可视化的 Excel 例子： 1. 打开 Excel 并创建一个新工作表。 2. 在 A 列中输入以下数据：1，2，3，4，5。 3. 在 B 列中输入以下数据：10，20，30，40，50。 4. 选中 A1 到 B5 的单元格，点击插入菜单中的“图表”按钮。 5. 在弹出的图表选项卡中，选择“散点图”。 6. 在图表中右键点击任意数据点，选择“添加数据标签”，然后选择“数值”。 7. 在图表中右键点击任意数据点，选择“数据系列格式”，然后选择“数据点颜色”。 8. 在弹出的“数据点颜色”对话框中，选择“渐变填充”。 9. 在弹出的“渐变填充”对话框中，选择“彩虹”选项卡，然后点击“确定”。 10. 点击图表中的任意数据点，可以看到该点的数值和颜色标签。 这个例子展示了如何使用 Excel 创建一个动态数据可视化图表，其中数据点颜色随着数值的变化而变化。您可以使用类似的方法来创建其他类型的可视化图表，以展示您的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

_胡杨_

感谢打赏，会多多更新的。

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

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

打赏作者

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

抵扣说明：

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

余额充值