Echart的学习之路（一）

最新推荐文章于 2020-04-22 18:18:12 发布

转载最新推荐文章于 2020-04-22 18:18:12 发布 · 置顶 · 1.1k 阅读

文章标签：

#echart #图表简单使用

echart的使用之路专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用ECharts创建图表的步骤，包括引入ECharts库、设置图表容器、初始化图表及配置参数等，并提供了一个简单的柱状图示例。

1.Echart的使用的简单配置（标签单文件的引入）

第一步：引用echart.js文件

第二步：添加图表容器（采用的是本地引用js文件）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echart的简单配置
		</title>
		<script src="echarts/echarts.js"></script>	
	</head>
	<body>
		<div id="chartmain" style="width:600px; height: 400px;"></div>
	</body>
</html>

也可采用在线引用的方式，将引用的文件改为
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

第三步：设置图表参数，进行初始化，可在echart的使用的实例粘贴改造
 
  <script type="text/javascript">
    // 初始化图表标签
    var myChart = echarts.init(document.getElementById('chartmain'));
    var options={
        //定义一个标题
        title:{
            text:'测试成绩'
        },
        legend:{
            data:['销量']
        },
        //X轴设置
        xAxis:{
            data:['60分','70分','80分','90分','100分']
        },
        yAxis:{
        },
        //name=legend.data的时候才能显示图例
        series:[{
            name:'销量',
            type:'bar',
            data:['12','32','45','21','1']
        }]

    };
    myChart.setOption(options);
</script>
  

  第四步 效果如下