使用echarts图表

1.首先在HTML中引入echarts.min.js文件：

2.然后在body中

3.在引入的index.js中先定义方法后,再在成功调用接口处调用。

datalist是来自调用接口成功时候所存储的数据。

function ts_chart() {
	var ts_chart = echarts.init(document.getElementById('tschart'));
	var data = {
		city: [],
		num: []
	}
	datalist.ts_chart.forEach((v, i) => {
		data.city.push(v.name)
		data.num.push(v.val)
	})
	option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: 'rgba(255,255,255,0)' // 0% 处的颜色
						}, {
							offset: 0.5,
							color: 'rgba(255,255,255,1)' // 100% 处的颜色
						}, {
							offset: 1,
							color: 'rgba(255,255,255,0)' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					}
				},
			},
	
		},
		grid: {
			top: '1%',
			left: '2%',
			right: '2%',
			bottom: '14%',
		},
		xAxis: [{
			type: 'category',
			boundaryGap: true,
			axisLine: { //坐标轴轴线相关设置。数学上的x轴
				show: true,
				lineStyle: {
					color: "rgba(7,29,43)"
				},
			},
			axisLabel: { //坐标轴刻度标签的相关设置
				textStyle: {
					color: '#cecece',
					margin: 15,
					fontSize: 8,
				},
				formatter: function(data) {
					return data
				}
			},
			axisTick: {
				show: false,
			},
			data: data.city
		}],
		yAxis: [{
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(7,29,43)'
				},
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "rgba(7,29,43)"
				}
	
			},
			axisLabel: {
				show: false,
				textStyle: {
					color: '#cecece',
					fontSize: 6,
	
				},
				formatter: function(value) {
					if (value === 0) {
						return value
					}
					return value + '%'
				}
			},
			axisTick: {
				show: false,
			},
		}],
		series: [{
			type: 'line',
			symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
			showAllSymbol: true,
			smooth: true,
			symbolSize: 5,
			lineStyle: {
				normal: {
					color: "#0d5c6d", // 线条颜色
				},
			},
			itemStyle: {
				color: "rgba(14,204,248,1)",
				borderColor: "#fff",
				borderWidth: 0.8
			},
			tooltip: {
				show: true
			},
			areaStyle: { //区域填充样式
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: 'rgba(0,150,239,0.7)'
						},
						{
							offset: 1,
							color: 'rgba(0,253,252,0)'
						}
					], false),
					shadowColor: 'rgba(53,142,215, 0.2)', //阴影颜色
					shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
				}
			},
			data: data.num
		}]
	};
	ts_chart.setOption(option);
}