前言：呦呦呦 是我我来了我是静静，这回又是零基础 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来设置
*/
复制代码 背景色全局的，所以直接在 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 给我们 想出了办法 看代码 哈
XXXX.hideLoading(); 关闭加载
所有数据的更新都通过 setOption实现 所以 很重要
给图表添加事件
PC端 图表 自适应
监控窗口 大小 随着变化而变化
window.addEventListener("resize", function () {
myChart.resize();
});复制代码
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
