零基础ECharts 图表使用步骤流程图详解与 pc 端自适应

时间 2019-12-12

原文原文链接

前言：呦呦呦是我我来了我是静静，这回又是零基础 echarts 图表的使用，最近项目中要用到echarts 使用，实话是在使用中，一共就三个步骤，看完开发文档稳妥当当的就会使用，可是你们懒啊因此这个重担交给我吧。外面市面上的又都是不全的。我今天就来所有整合和使用一下吧你们跟我来javascript

echarts 是什么

是一个原生js 集合 canvas 进行的绘画出来的图标，用来展现数据。到如今是4.0的今天了html

正课开始

准备工具：咱们这里开发工具sublime 和在官网下载的 echarts 包vue

一、echarts.baidu.com/tutorial.ht… 去找个连接里面下载 echarts 包和使用vue的同窗 npm 下载的方法java

让咱们先尝试图表展现在页面上

<head>
	<meta charset="UTF-8">
	<title>echarts</title>
	 <!--  第一步骤 引入 ECharts 文件 -->
	<script type="text/javascript" src="echarts/echarts.js"></script>
</head>
<body>
	<!--  
		第二步骤  设置一个容器DOM 能够用来存放 echarts 
		 找个容器宽600 高 400
	 -->
	 <div id="main" style="width: 600px;height: 400px;"></div>
</body>
	<script type="text/javascript">
		/*
			第三步 基于准备好的dom，初始化echarts实例 
			这里记住 echarts 使用的是 init  联合起来就是  echarts.init
			在 echarts.int() 方法里面 获取到 DOM 的 id 这里跟你讲奥 
			id，class 均可以的 大家不用试验了 喂给你们吃
		*/
		var myChar = echarts.init(document.querySelector('#main'));
		/*
			第四步 指定图标配置项和数据 
			这里呢就是咱们要展现在页面中的内容部分就是至关于人你让他长啥样
			这里语法都是固定好的 var option 是 使用 option 选项
		*/

		var option = {
			 title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
		}

		/*	
			这里第五步 使用配置项和数据显示图表。

			mychar 是咱们把初始化 获取到的 DOM 赋给的值。
			而后使用 setOption 这里注意Option 驼峰命名法 O 大写 是o 不是零 
			而后把咱们 选项的图片 option 给 setOption 页面就显示了
		*/
		myChar.setOption(option);
	</script>
</html>
复制代码

下面是图片实例让咱们继续往下讲，是否是都好奇option 里面都是什么为何会这么神奇ajax

详讲饼图里面各个功能

一、data:    二、itemStyle 
复制代码

解释：由于只有 option 部分代码不同为了能展现开因此只放 option 部分图片npm

/* 
    这里data属性值 包含 name 和 value 属性的对象 
	 value：的数值是所占内容的份额 
	 name: 是所占份额的名字
 */ 
 /*
 itemStyle 
    通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等
    使用itemStyle来设置
*/ 
复制代码

全局使用一、 backgroundColor 二、 textStyle:

背景色全局的，因此直接在 option 下设置 backgroundColor
		 backgroundColor: '#B0C4DE',	
 
 文本的样式能够设置全局的 textStyle。
		 textStyle:{
		 	color:'#4B0082',
		 	fontSize:25
		 },	
复制代码

给饼图分支设置样式

// 给 饼图外面的分支文字设置颜色
   	label:{
 		textStyle:{
 			color:'#0000CD'
 		}
 	},
 	
// 给 饼图分出来的枝丫设置 颜色
	labelLine:{
		lineStyle:{
			color:'black'
		}
	},	
复制代码

给单独的饼图设置样式 Data 数据

调整格式你们懂得，因此更换了vscode了

高亮提示与高亮提示文字

异步数据获取图标

// 模拟异步加载数据
    function echarData(yb){
        setTimeout(function(){
            yb({
                categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                data:[5, 20, 36, 10, 10, 20]
               
            })
        },1000)
    };
    
这里模拟异步 加载中yb 形参中 categories 和  data 数据相对象 
复制代码

这里很重要一点就是后台传给前台的数据在echarts 中设置必须同样在setOption 中

// 这里你们都能看懂 是使用了声明函数，在形参中调用一个函数，把函数传入形参
    echarData(function(data){
        console.log(data) //这里data 拿到的就是 异步加载yb里面的数据
        // 而后在 myChar.setOption 中 给咱们所须要的数据进行动态渲染
        // 这里很重要一点就是 后台传给前台的数据 在echarts 中吧 必须格式同样
        myChar.setOption({
            xAxis:{
                data:data.categories
            },
            series:[{
                name:'咱们要记住更改这里下面也须要更改',
                data:data.data
            }]
        })
    })
复制代码

loading 动画当图片首次加载的时候没有显示出来时候使用用于优化

咱们在使用ajax 加载的时候会遇到网络问题加载过于缓慢等这时候echarts 给咱们想出了办法看代码哈canvas

myChar.showLoading(); 前面的 myChar 到时候换成大家本身声明的方法这个是开启加载

XXXX.hideLoading(); 关闭加载网络

全部数据的更新都经过 setOption实现因此很重要

给图表添加事件

PC端图表自适应

这里记住要给存放echarts 表DOM 容器使用的是百分比进行存放而后使用下面红框中的 js window窗口.添加就可使echarts 大小自适应了由于监控了窗口

监控窗口 大小 随着变化而变化 
     window.addEventListener("resize", function () {
        myChart.resize();
    });复制代码

零基础ECharts 图表 使用 步骤 流程图 详解 与 pc 端自适应

echarts 是什么

正课 开始

让咱们 先尝试 图表展现 在页面上

详讲 饼图 里面各个 功能

给 饼图分支 设置样式