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

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

echarts 是什么

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

正课开始

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

1、echarts.baidu.com/tutorial.ht… 去找个链接里面下载 echarts 包和使用vue的同学 npm 下载的方法

让我们先尝试图表展示在页面上

<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 里面都是什么为什么会这么神奇

详讲饼图里面各个功能

1、data:    2、itemStyle
复制代码

解释：因为只有 option 部分代码不一样为了能展示开所以只放 option 部分图片

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

全局使用 1、 backgroundColor 2、 textStyle:

  背景色全局的，所以直接在 option 下设置 backgroundColorbackgroundColor: '#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 给我们想出了办法看代码哈

myChar.showLoading(); 前面的 myChar 到时候换成你们自己声明的方法这个是开启加载

XXXX.hideLoading(); 关闭加载

所有数据的更新都通过 setOption实现所以很重要

给图表添加事件

PC端图表自适应

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

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

转载于:https://juejin.im/post/5c9ad7a3e51d457a931ffed1