01、echart的基本使用

一为什么使用echarts

丰富的可视化类型（柱状图、散点图、雷达图…）

多种数据格式无需转换直接使用

千万数据的前端展现移动端优化

多渲染方案，跨平台

动态数据

绚丽的特效

二echarts快速上手

在这里插入图片描述

方式一：

从gi thup中下载echarts

获取echarts.js 和 echarts.min.js

引入到j s文件当中

在这里插入图片描述

方式二

在这里插入图片描述

外网才能使用url，内网要把代码下载下来使用

二快速上手

在这里插入图片描述

三配置

在这里插入图片描述

3.1 title配置

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/echarts.min.js"></script>
</head>
<body><div id="echs" style="width: 300px; height:200px"></div><script>var idEchs = document.getElementById("echs")var ehc = echarts.init(idEchs)console.log(ehc)var options = {title:{text: 'hello world',subtext: '你好世界',textStyle:{color:'red'}}}ehc.setOption(options)</script>
</body>
</html>

在这里插入图片描述

1 Link:点击跳转到百度

案例：

2标题居中

le f t向左偏移

te xtalign: 居中

在这里插入图片描述

3.2 坐标轴和标题

在这里插入图片描述

3.2.1 直角坐标系中的 x/y 轴

在这里插入图片描述

3.2.2 案例1

在这里插入图片描述

tit le居中显示： le f t:50%, textAlign:‘center’ // 文字居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/echarts.min.js"></script>
</head>
<body><div id="echs" style="width: 800px; height:600px"></div><script>var idEchs = document.getElementById("echs")var ehc = echarts.init(idEchs)var options = {title:{text:"衣服销量",textStyle:{color:'red',fontSize:14},subtext:'衣服销量',subtextStyle:{fontSize:10 },left:'50%',//位置居中对齐textAlign:'center' // 文字居中},xAxis:{type:'category',data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'],},yAxis:{type:'value',},series:[{type:'bar',data:[120,200,150,90,75,110]}]}ehc.setOption(options)</script>
</body>
</html>

3.2.3 案例2

在这里插入图片描述

1axisLine里边设置箭头：数组【上箭头+ 下箭头】，箭头偏移

在这里插入图片描述

2。axisTick：刻度线

3 axisLabel：刻度标题朝里边“

在这里插入图片描述

4 min:50,// y轴以50开头

5刻度线在中间显示

在这里插入图片描述

6 na me 标题

在这里插入图片描述

8 offset 轴线与内容进行偏移

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/echarts.min.js"></script>
</head>
<body><div id="echs" style="width: 800px; height:600px"></div><script>var idEchs = document.getElementById("echs")var ehc = echarts.init(idEchs)var options = {title:{text:"Echarts 扩展",textStyle:{// 支持rgb rgba 十六进制color:'rgb(255,0,255)',fontSize:18},borderColor:'blue',borderWidth:2,borderRadius:5,subtext:'副标题',// subtextStyle:{//     fontSize:10 // },left:'50%'},xAxis:{type:'category',data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'],axisLine:{//坐标轴轴线（包括箭头）show:true,symbolOffset:[0,10],//轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；如果是数字，表示这两个箭头使用同样的偏移。symbol:['none','arrow']//默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']。},axisTick:{//刻度alignWithLabel:true // 刻度线放在柱状图中间},axisLabel:{ //刻度标签rotate:30 // 刻度文字旋转30度},name:'衣服品类', // 标题 nameTextStyle:{color:'green',fontSize:18,},nameRotate:-20, //旋转nameLocation:'center',offset:5, //偏移 往下移动nameGap:30 //坐标轴名称与轴线之间的距离。},yAxis:{type:'value',name:'销量/个',nameTextStyle:{ //y轴标题color:'blue',fontWeight:600,borderWidth:1,borderColor:'green',borderType:'dashed',// 虚线borderRadius:10,padding:5,align:'center'},axisLine:{ // 坐标轴show:true,symbolOffset:[0,10], // 箭头往上偏移10 symbol:['none','arrow'] // 添加箭头， 只让有一个上箭头},axisTick:{ // 添加刻度线show:true，//length:10 边长},axisLabel:{ // 刻度标签 ：文字// inside: true 刻度文字 朝里color:'rgb(255,0,255)'},min:50,// 以50开头offset:5 // 刻度线偏移5},series:[{type:'bar',data:[120,200,150,90,75,110]}]}ehc.setOption(options)</script>
</body>
</html>

4 公共样式设置

颜色主题（Theme）

调色盘

直接样式设置（itemStyle、lineStyle、areaStyle、label、…）

高亮显示emphasis

4.1 颜色主题

在这里插入图片描述

如果是da r k 的话：
在这里插入图片描述

除了这两种，还可以配置其他主题

2 下载主题：

https://echarts.apache.org/zh/theme-builder.html

在这里插入图片描述

选在一个主题后，下载主题

在这里插入图片描述

引入进行j s,以j s的名字命名：

在这里插入图片描述

4.2 调色盘

在这里插入图片描述

每一个的颜色：用数组进行设置

在opotion中添加color: 是一个数组，可以是多个

柱状图只取第一个，再在series中配置一个属性可以取多个

饼图都取

柱状图不设置colorBy:‘data’ 默认取颜色数组中的第一个，设置的话是随机的

  color:["#eee","rgb(255,255,255)","yellow"],

在这里插入图片描述

4.3 调色盘- 渐变色

在这里插入图片描述

4.4 综合案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/echarts.min.js"></script>
</head>
<body><div id="echs" style="width: 800px; height:600px"></div><script>var idEchs = document.getElementById("echs")var ehc = echarts.init(idEchs)var options = {title:{text:"Echarts 扩展",textStyle:{// 支持rgb rgba 十六进制color:'rgb(255,0,255)',fontSize:18},borderColor:'blue',borderWidth:2,borderRadius:5,subtext:'副标题',// subtextStyle:{//     fontSize:10 // },left:'50%'},color:["#eee","black",{type: 'linear',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],global: false // 缺省为 false},"yellow","red"],xAxis:{type:'category',data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'],axisLine:{show:true,symbolOffset:[0,10],symbol:['none','arrow']},axisTick:{alignWithLabel:true},axisLabel:{rotate:30},name:'衣服品类',nameTextStyle:{color:'green',fontSize:18,},nameRotate:-20,nameLocation:'center',offset:5,nameGap:30},yAxis:{type:'value',name:'销量/个',nameTextStyle:{color:'blue',fontWeight:600,borderWidth:1,borderColor:'green',borderType:'dashed',borderRadius:10,padding:5,align:'center'},axisLine:{show:true,symbolOffset:[0,10],symbol:['none','arrow']},axisTick:{show:true},axisLabel:{color:'rgb(255,0,255)'},min:50,offset:5},series:[{type:'bar',colorBy:"data",data:[120,200,150,90,75,110]}]}ehc.setOption(options)</script>
</body>
</html>

4.5 直接样式设置

在这里插入图片描述

4.5.1 itemStyle

在这里插入图片描述

让第二项变成红色，其他项都变成黄色：

在这里插入图片描述

4.5.2 线样式设置

在这里插入图片描述

4.5.3 高亮

在这里插入图片描述

针对所有柱子：

在这里插入图片描述

针对某一个柱子：

在这里插入图片描述

四课后练习

贴图工具：https://zh.snipaste.com/

在这里插入图片描述

1 基本配置

在这里插入图片描述

背景图：深蓝backgroundColor:‘#0e205d’
标题：居中对齐 left:50%
a xisLine 刻度线：里边可以设置箭头（分上下两个箭头，只显示上箭头 symbol:[‘none’,“arrow”],），

设置箭头偏移量 symbolOffset:[0,10]
color 渐变颜色：从文档中直接复制对象：只需要修改【两个】颜色
柱状图宽度 bar width , 圆角，阴影（有模糊程度）
Label : 位置 position:top 往上偏移 di stance:20

设置背景（椭圆【设置宽高】，文字居中对齐）

backgroundColor:‘#102d6a’,
width:30,
height:30,
lineHegiht:30,
align:‘center’,
verticalAlign:‘middle’,
borderRadius:30,
分割线 splitLine

在这里插入图片描述

刻度标签

在这里插入图片描述

2 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/echarts.min.js"></script>
</head>
<body><div id="echs" style="width: 800px; height:600px"></div><script>var idEchs = document.getElementById("echs")var ehc = echarts.init(idEchs)var options = {backgroundColor:'#0e205d', // 添加背景色title:{ //标题text:"办公室杂项",left:'50%', // 位置居中textAlign:'center',// 文字居中textStyle:{color:'white',}},xAxis:{type:'category',axisLine:{  show:true,symbol:['none',"arrow"],symbolOffset:[0,10]},data:["工作票","操作票","抢修","用电调查","设备巡视","现场勘察","到岗到位"],axisLabel:{color:'white',margin:10,fontSize:16},},yAxis:{type:'value',// 坐标设置axisLine:{ // 添加箭头， 并且让箭头偏移10show:true,symbol:['none',"arrow"],symbolOffset:[0,10]},// 坐标轴标签设置：文字axisLabel:{color:'white'},// 里边刻度线的样式 splitLine:{lineStyle:{color:'#20376d'}}},color:[{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#00f1fd' // 0% 处的颜色}, {offset: 1, color: '#1f45a4' // 100% 处的颜色}],// 渐变色global: false // 缺省为 false }],series:[{type:'bar',data:[300,450,770,203,255,188,156],barWidth:20, //柱状图宽度itemStyle:{  borderRadius: 20,  // 变成圆角shadowColor:'#1f45a4', // 添加阴影shadowBlur:4 //模糊大小},label:{ //柱状图标签show:true,position: 'top',backgroundColor:'#102d6a',width:30,height:30,lineHegiht:30,align:'center',verticalAlign:'middle',borderRadius:30,distance:20 }}]}ehc.setOption(options)</script>
</body>
</html>