Echarts demo

静态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div id="div1" style="width: 600px;height: 400px;"></div>
		<script>
			var myChart = echarts.init(document.getElementById("div1"));
			//bar
			// var option={
			// 	legend:{
			// 		data:['steps']
			// 	},
			// 	xAxis:{
			// 		data:['monday','tuesday','wednesday']
			// 	},
			// 	yAxis:{},
			// 	series:[
			// 		{
			// 			name:'steps',
			// 			type:'bar',
			// 			data:[8000,11000,9000]

			// 	},
			// 	]
			// }

			//line
			// var option={
			// 	xAxis:{
			// 		type:'category',
			// 		data:['monday','tuesday','wednesday']
			// 	},
			// 	yAxis:{
			// 		type:'value'
			// 	},
			// 	series:[
			// 		{
			// 			type:'line',
			// 			data:[8000,11000,9000]

			// 	},
			// 	]
			// }

			//pie
			var option = {
				series: [
					{
					type: 'pie',
					data: [
						{
							name: 'monday',
							value: 8000
						},
						{
							name: 'tuesday',
							value: 11000
						},
						{
							name: 'wednesday',
							value: 9000
						}
					]
				}
				]
			}

			myChart.setOption(option);
		</script>
	</body>
</html>

动态

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<div id="div1" style="width: 600px;height: 400px"></div>
<div id="div2" style="width: 600px;height: 400px"></div>
<div id="div3" style="width: 600px;height: 400px"></div>
<script type="text/javascript">
    axios
        .get('http://localhost:8080/json')
        .then(function (response) {
            backendData = response.data;
            //[{id: 1, name: "jobs", score: 99}, {id: 2, name: "musk", score: 98}, {id: 3, name: "json", score: 95}]
            
            var x_data = [], y_data = [], p_data = [];
            for (var i = 0; i < backendData.length; i++) {
                x_data[i] = backendData[i].name;
                y_data[i] = backendData[i].score;
                var person = {};
                person.name = backendData[i].name;
                person.value = backendData[i].score
                p_data[i] = person;
            }

            //bar
            var barChart = echarts.init(document.getElementById("div1"));
            var option = {
                legend: {
                    data: ['score']
                },
                xAxis: {
                    data: x_data
                },
                yAxis: {},
                series: [
                    {
                        name: 'score',
                        type: 'bar',
                        data: y_data
                    }
                ]
            }
            barChart.setOption(option);

            //line
            var lineChart = echarts.init(document.getElementById("div2"));
            var option = {
                xAxis: {
                    type: 'category',
                    data: x_data
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'line',
                        data: y_data
                    }
                ]
            }
            lineChart.setOption(option);

            //pie
            var pieChart = echarts.init(document.getElementById("div3"));
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'pie',
                        data: p_data
                    }
                ]
            }
            pieChart.setOption(option);
        })

</script>
</body>
</html>
posted @ 2024-01-13 11:46  框框A  阅读(98)  评论(0)  编辑  收藏  举报