一、echarts是什么？

二、基础使用步骤

下载

使用步骤

三、属性详解

option 选项

 type 类型

四、特别设置

 颜色样式控制

线

柱状图

渐变颜色

堆叠图

富文本

五、地图

前言

在前端工作中，加图表是一个非常常见的任务，今天分享的就是echarts的学习笔记。

一、echarts是什么？

一个基于 JavaScript 的开源可视化图表库

百度开发团队制作，开源交给apache基金管理

同类型产品：Highcharts、HighchartsD3

二、基础使用步骤

1.下载

当前学习中，是导入了官网下载的源文件，如需要可去官网下载👇

Apache ECharts 一个基于 JavaScript 的开源可视化图表库echarts使用指南-编程之家https://echarts.apache.org/zh/download.html

2.使用步骤

①、初始化

 var echart = echarts.init(dom节点);

②、定义选项option

   var option = {title: {text: "第一个表格"},color: ["#e01f54", "#001852", "#f5e8c8",],legend: {data: ["成绩"]},tooltip: {},xAxis: {data: ["3.1", "3.2", "3.3", "3.4", "3.5"]},yAxis: {},series: [{type: "bar",data: [90, 80, 100, 60, 80],name: "成绩"}]}

③、更新选项

echart.setOption(option);

三、属性详解

option 选项

title 标题

 text:"标题文本"

color 调色盘

color: ["#e01f54", "#001852", "#f5e8c8", "#b8d2c7",],

legend 图例

{data:["name1","name2"]}

注意：与series中图的name保持一致

tooltip 提示

xAxis x轴线

{data:["x1","x2",...]}

yAxis y轴线

{data:["y1","y2",...]}

series 系列数据

[{type: "bar",data: [...],name: "..."},{type: "line",data: [...],name: "..."},{type: "pie",data: [...],name: "..."},
]

 type 类型

bar 柱状图

{
name:"名称",
type:"bar",
data:[10,{value:10}],
itemStyle:{color:xxx}//图的颜色
}

line 线

{name:“名称”，type:"line",smooth:true, //平滑areaStyle:{面的样式},lineStyle：{线的样式}
}

pie 饼状图

{name:"名称",type:"pie",radius:["10%","50%"],//内圈，外圈data:[{name:"n1",value:40},{name:"n2",value:60}],left:"距左侧距离",top:"距顶部距离"
}

以上为常见的属性，更详细的配置信息请参考👇

echarts配置项手册echarts使用指南-编程之家https://echarts.apache.org/zh/option.html#title

四、特别设置

 颜色样式控制

主题
    light 亮  dark 暗

init(dom节点,"light"/"dark")

 不写则为默认颜色

自定义主题
echarts 主题编辑器echarts使用指南-编程之家https://echarts.apache.org/zh/theme-builder.html官网配置好后，下载js 导入 引用

<script src="./js/shine.js"></script>
init(dom,"shine")

调色板
在option中，定义color数组

itemStyle
具体数据:在某个图的data中给某个数据设置

data: [90, 80, 100, {value: 60,itemStyle: {color: "#2e4783"}
}, 80],

系列数据：给某个图设置
 写法1：设置默认颜色，选中颜色默认比设置的颜色亮一些

itemStyle: {color: "#a4d8c2",
}

写法2：详细设置

itemStyle: {normal: {//默认样式color: "#a4d8c2"},emphasis: {//强调样式color: "#d3758f"}
}

线

lineStyle: {width: 10,//10像素cap: "round"//端点平滑
}

柱状图

itemStyle:{borderRadius:[100,100,100,100],}
//圆角，左上，右上 ，右下，左下

渐变颜色

 渐变需要先定义渐变颜色，引用时直接引用定义的变量名

    var mycolor = {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(80, 15, 205, 0.7)' // 0% 处的颜色}, {offset: .7,color: 'rgba(29, 249, 231, 0.1)' // 100% 处的颜色}],global: false // 缺省为 false}

堆叠图

 在series的数据中，添加stack: true属性，即可实现堆叠效果

{name:"ui",data:[],stack:true},
{name:"web",data:[],stack:true}

富文本

 主要是label属性

eg:给“中国”big样式

label: {show: true,position: "center",rich:{big:{fontSize:"24px"}}formatter:"{big|中国}"
}

rich： 定义样式

formatter ：字符串的模板

  • {a} 系列名称
  • {b} 名称
  • {c} 值
  • {d} 百分百

position：定位

  • "center" 中间
  • "insideRight" 内部右侧

五、地图

{name:"china",type:"map",mapType:"china",data:[{name:"",value:100}]}

 getMap()

fetch(url)
.then(res=>res.json())
.then(res=>{echarts.registerMap("china",res);option.series[0].mapType("china");echart.setOption(option);
})

 重要↓

echarts.registerMap(name,res);