echarts.js 简单入门

echarts.js简介

echarts.js是一款基于HTML5的图形库。图形的创建也比较简单，直接引用Javascript即可。
使用这个库的优点：

  1. 这个库是百度的项目，而且一直有更新，目前最新的是EChart3；
  2. 这个库的项目文档比较详细，每个点都说明的比较清楚，而且是中文的，理解比较容易；
  3. 这个库支持的图形很丰富，并且可以直接切换图形，使用起来很方便；

官网：echarts.js

echarts.js的使用步骤：

1.引用echarts.min.js文件

<script type="text/javascript" src="D:/ruanjian/echarts.min.js"></script>

echarts.min.js文件有多个版本，可以根据实际需要引用需要的版本。下载链接

2.准备放图表的容器

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

3.设置参数，初始化图表

<script type="text/javascript">
    //指定图标的配置和数据
    var option = {
        title:{
            text:'折线图'
        },
        tooltip:{},
        legend:{
            data:['访客来源']
        },
        xAxis:{
            data:["智联招聘","51job","拉钩","Boss直聘"]
        },
        yAxis:{
        },
        series:[{
            name:'访问量',
            type:'line',
            areaStyle: {
                normal: {}
            },
            data:[600,310,200,800]
        }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart1'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
</script>

<script>
	//基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartMethodOne'));
    myChart.setOption({
        title: {
            text: '月度票量折线图（点击钻取加载，当年1-12月）'
        },
        tooltip: {},
        //legend: {
        //data:['']
        //},
        xAxis: {
            data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
        },
        yAxis: {},
        series: [{
            name: '票量',
            type: 'line',
            data:[40,20,35,60,55,10,123490,12345,234,1234,12345,2344]
        }]

    });
</script>

<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '销量柱状图'
		},
		tooltip: {},
		legend: {
			data:['销量']
		},
		xAxis: {
			data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
		},
		yAxis: {},
		series: [{
			name: '销量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20]
		}]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>

<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('pie'));

	myChart.setOption({
		series : [
			{
				name: '访问来源',
				type: 'pie',    // 设置图表类型为饼图
				radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
				data:[          // 数据数组，name 为数据项名称，value 为数据项值
					{value:235, name:'视频广告'},
					{value:274, name:'联盟广告'},
					{value:310, name:'邮件营销'},
					{value:335, name:'直接访问'},
					{value:400, name:'搜索引擎'}
				]
			}
		]
	})
</script>

完整页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计</title>
</head>
<body>
<div id="chart1" style="width:600px; height: 400px;"></div>
<div id="chartMethodOne" style="width:600px; height: 400px;"></div>
<div id="main" style="width: 600px;height:400px;"></div>
<div id="pie" style="width: 600px;height:400px;"></div>

<script type="text/javascript" src="D:/ruanjian/echarts.min.js"></script>

<script type="text/javascript">
    //指定图标的配置和数据
    var option = {
        title:{
            text:'折线图'
        },
        tooltip:{},
        legend:{
            data:['访客来源']
        },
        xAxis:{
            data:["智联招聘","51job","拉钩","Boss直聘"]
        },
        yAxis:{
        },
        series:[{
            name:'访问量',
            type:'line',
            areaStyle: {
                normal: {}
            },
            data:[600,310,200,800]
        }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart1'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
</script>

<script>
	//基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartMethodOne'));
    myChart.setOption({
        title: {
            text: '月度票量折线图（点击钻取加载，当年1-12月）'
        },
        tooltip: {},
        //legend: {
        //data:['']
        //},
        xAxis: {
            data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
        },
        yAxis: {},
        series: [{
            name: '票量',
            type: 'line',
            data:[40,20,35,60,55,10,123490,12345,234,1234,12345,2344]
        }]

    });
</script>

<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '销量柱状图'
		},
		tooltip: {},
		legend: {
			data:['销量']
		},
		xAxis: {
			data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
		},
		yAxis: {},
		series: [{
			name: '销量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20]
		}]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>

<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('pie'));

	myChart.setOption({
		series : [
			{
				name: '访问来源',
				type: 'pie',    // 设置图表类型为饼图
				radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
				data:[          // 数据数组，name 为数据项名称，value 为数据项值
					{value:235, name:'视频广告'},
					{value:274, name:'联盟广告'},
					{value:310, name:'邮件营销'},
					{value:335, name:'直接访问'},
					{value:400, name:'搜索引擎'}
				]
			}
		]
	})
</script>

</body>
</html>

效果：

在这里插入图片描述
在这里插入图片描述

Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport

avatar ViewDesign
cover

vue+element-ui

avatar ViewDesign

VUE 入门及应用 ( 五 ) ElementUI 组件

VUE 入门及应用 ( 五 ) ElementUI 组件

avatar ViewDesign