echart新手入门教程

1.下载及引入

在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

在html文件中的script标签的src属性中引入

2.柱形表、

type：bar是柱状图，line是线型图，

<script type="text/javascript">
			var echart = echarts.init(document.getElementById("container"),'purple-passion');
			var option = {
				color:["#f70","#f70","#f70","#f70","#f70",]
				title: {
					text: "vue考试成绩分析图"
				},
				legend: {
					data: ["成绩"]
				},
				tooltip: {},
				xAxis: {
					data: ["3.1", "3.2", "3.3", "3.4", "3.5"]
				},
				yAxis: {},
				series: [{
					type: "bar",
						data: [90, 60, 33, 88, 99],
						name: "成绩"
					},
					{
						type: "line",
						data: [88, 66, 55, 77, 48],
						name: "平均成绩",
						smooth: true
					},
					{
						type: "line",
						data: [10, 20, 15, 6, 3],
						name: "80分以上人数",
						smooth: true,
						areaStyle: {
							color: "#f70"
						}
					},

以上代码效果如下：

3.堆叠图 

<script type="text/javascript">
			var echart=echarts.init(document.getElementById("container"),'dark');
			var option ={
				title:{text:"堆叠图"},
				tooltip:{trigger:"axis"},
				legend:{data:["ui","java","web","python"]},
				xAxis:{},
				yAxis:{data:["2019","2020","2021"]},
				label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
				series:[
					{name:"ui",type:"bar",data:[120,80,70],stack:true},
					{name:"java",type:"bar",data:[27,50,100],stack:true},
					{name:"web",type:"bar",data:[180,220,240],stack:true},
					{name:"python",type:"bar",data:[200,120,80],stack:true},
				]
				
			}
			echart.setOption(option)
		</script>

效果如下：