前言
Echarts是一个 JavaScript 的开源可视化图表库，可以快速画出许多图形，我们有时候会用到它，但是官方教程对于新手来说确实不友好，至少在我看来是这样的，看了我几天才大概有所了解，为了加深记忆，故在此记下，方便日后忘记可以回来查看
文章目录
- 前言
- 一、基础画图
- 二、配置项setOption
-
- 1、title
- 2、legend
- 3、grid
- 4、xAxis
- 5、yAxis
- 6、tooltip
- 7、toolbox
- 8、series
一、基础画图
基础画一个图，首先要知道的是重点在于配置项setOption,现在先不急了解，我们先简单画一个图
1、在页面创建一个div标签，id值为myChart
2、引入echarts.js并绘画，echats.js的 Github下载地址
3、一开始还是挺好理解的，就是这两个步骤,你也可以选择封装一下
把上面第2步简化一下就是：(option和第2步的option 相同，这里就不写了）
有时候如果宽高不设死需要自适应，可以使用 resize() 方法，这时候 return myChart 的作用就出来了,这里就不写配置项option了
如果觉得麻烦，就用第2步就行，下面重点介绍配置项setOption
二、配置项setOption
下面这些为本人所用过的以及一些个人理解，如有错误还请看：官 配置项详情，也可以边看此文和官 一起学习
下面一些为我常用配置，并未盖全，更多可以看：官 配置项详情
1、title
title是该画布的标题，包含主标题和副标题,里面配置项有
2、legend
官方解释：图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。不懂可以看看上面那个官 地址那里面的试一试
3、grid
直角坐标系内绘图 格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。这个可以控制图表的位置，设置图表上下左右的距离
4、xAxis
图表的X轴
xAxis:{ show:false, // 隐藏或显示 true-显示 false-隐藏 type:'', // 坐标类型 value- 数值轴 category-类目轴 time-时间轴 log-对数轴 name:'', // 坐标轴名称 nameLocation:'',// 坐标轴名称显示位置 start-开头 middle或center-中间 end-末尾 nameTextStyle:{},// 坐标轴名称的文字样式 nameGap:10, // 坐标轴名称与轴线之间的距离 min:0, // 坐标轴刻度最小值 max:0, // 坐标轴刻度最大值 axisLine:{ // 坐标轴轴线相关设置 lineStyle:{ // 坐标线条样式 color:'', // 线条颜色 width:1, // 线条宽度 // ......更多请看官 一般我就用这几个属性 }, }, axisTick:{ // 坐标轴刻度相关设置 show:true, // 显示隐藏 alignWithLabel:false, // false-刻度线和标签不对齐 true-刻度线和标签对齐 inside:false, // 坐标轴刻度是否朝内，默认朝外 true-朝内 false-朝外 lineStyle:{}, // 刻度线样式 }, axisLabel:{ // 坐标轴刻度标签的相关设置 show:true, // 是否显示刻度标签 margin:8, // 刻度标签与轴线之间的距离 color:'', // 刻度标签文字的颜色 data:[], // 类目数据，在类目轴（type: 'category'）中有效 // formatter: '{value} kg', // 使用字符串模板，模板变量为刻度默认标签 {value} // 或 // formatter: function (value, index) { // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 // return value + 'kg'; // } }, axisPointer:{ // 坐标轴指示器配置项,鼠标滑过显示数据 show:true, // 显示隐藏 type:'', // 指示器类型,line-直线指示器 shadow-阴影指示器 none-无指示器 label:{ // 坐标轴指示器的文本标
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！