主要记录option里面的相关知识
官方文档：https://echarts.apache.org/zh/option.html#title

入门示例

option = {xAxis:{// 设置x轴type: 'category',// 类目轴，即x轴上列出的是数据的分类，因此是需要data属性data: ['a', 'b', 'c']// 明确指出x轴上需要列出的有哪些分类},yAxis: {// y轴type: 'value'// 数值轴，不需要设置data了，会自动根据实际数据自动确定范围},series: [{name: 'wen',//代表是三个分类下的wen的数据type: 'bar',//图形类型 bar柱状图，line拆线图，pie饼图data: [79,92,83]}]
};

柱状图

var xData = ['张三', '李四', '王五', '周土', '小明', '茅台', '二姐', '大强'];
var yData = [88, 92, 63, 77, 94, 80, 72, 86];
option = {xAxis: {type: 'category',data: xData},yAxis: {type: 'value'},series: [{name: '语文',type: 'bar',data: yData,markPoint: {// 标记点data: [{type: 'max',name: '最高分'},{type: 'min',name: '最低分'}]},markLine://横线{data:[{type:'average',name:'平均分',}] },label:{show:true,//是否显示rotate:60,//旋转position:'inside'},barWidth:20//当前柱状图的宽度}]
};

转成横向的话，只需要在上面代码的基础上，交换xAxis和yAxis的配置即可

  xAxis: {type: 'value'},yAxis: {type: 'category',data: xData},

通用配置

title

文字样式
边框
位置

  title:{text:'成绩',textStyle:{color:'red'},borderWidth:5,//边框宽度borderColor:'yellow',//边框颜色borderRadius:30, //边框圆角left:300,//位置偏移top:50}

tooltip

  tooltip:{trigger:'item'//自动拼接显示的内容},

  tooltip:{trigger:'axis'//只要鼠标在柱状图中，就会显示离其最近的那个轴的数据},

  tooltip:{trigger:'item',triggerOn: "click",//指定鼠标点击时才触发弹出提示框formatter: '{b}的{a}成绩是{c}分'},

https://echarts.apache.org/zh/option.html#tooltip.formatter

  tooltip:{trigger:'item',formatter:function(obj){//也可以使用回调函数console.dir(obj);return "";}},

toolbox

  toolbox:{feature:{//功能设置saveAsImage:{}//开启了下载为图片，即使什么都不配，也会出现该功能}},

  toolbox: {//功能设置feature: {// 数据视图dataView: {}}},

  toolbox: {//功能设置feature: {//还原功能restore: {}}},

  toolbox: {//功能设置feature: {//缩放dataZoom: {},magicType: {//图形类型切换type: ['bar', 'line']}}},

legend

图例，用于筛选系列，即点哪个系列哪个系列的显示与否就会进行切换，需要和series配合使用

var xData = ['张三', '李四', '王五', '周土', '小明', '茅台', '二姐', '大强'];
var yData = [88, 92, 63, 77, 94, 80, 72, 86];
var yData2 = [93, 60, 61, 62, 85, 79, 92, 30];
option = {title: {text: '成绩',textStyle: {color: 'red'},borderWidth: 5, //边框宽度borderColor: 'yellow', //边框颜色borderRadius: 30, //边框圆角left: 300, //位置偏移top: 50},legend:{data:['语文','数学'] //该数组中每一个元素都是字符串，且需要与series里面的元素的name的值一致},xAxis: {type: 'category',data: xData},tooltip: {trigger: 'item',formatter: '{b}的{a}成绩是{c}分'},yAxis: {type: 'value'},series: [{name: '语文',type: 'bar',data: yData,}, {name:'数学',type:'bar',data:yData2},]
};

markArea 区域标记

var xData = [];
for (let i = 1; i < 13; i++) {xData.push(i + '月');
}
var yData = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600];
option = {title: {text: '康师傅销量走势'},xAxis: {type: 'category',data: xData},yAxis: {type: 'value'},series: [{name: '康师傅',data: yData,type: 'line',markArea: {data: [//数组下的元素也是数组[//每个数组里面需要有两个元素{xAxis: '1月'//默认第一个元素为开始点},{xAxis: '2月'//默认第二个元素为结束点}],[{xAxis: '7月'},{xAxis: '8月'}]]}}]
};

平滑和线条

smooth:true,//拆线会变得比较光滑
lineStyle:{//设置线型color:'red',type:'dashed'
},

面积

areaStyle:{//被折线所包起来的区域color:'pink'
},

紧挨边缘

xAxis: {type: 'category',data: xData,boundaryGap:false // 使得x轴的第一个元素紧挨y轴
},

脱离0值

  yAxis: {type: 'value',scale: true // 使得数值轴脱离0值，自动调整范围，比如这里的y轴不再从0开始},

堆叠图

series: [{name: '康师傅',data: yData,type: 'line',stack:'all'},{name:'白象',data:yData2,type:'line',stack:'all'}
]

散点图

用以推断变量间的相关性

option = {xAxis: {type: 'value',  //设置成数值轴scale: true     //脱离0值约束},yAxis: {type: 'value',scale: true   },series: [{symbolSize: 20,//设置散点的大小data: [//需要是一个二维数组[10.0, 8.04],[8.07, 6.95], [13.0, 7.58], [9.05, 8.81], [11.0, 8.33], [14.0, 7.66], [13.4, 6.81], [10.0, 6.33], [14.0, 8.96], [12.5, 6.82], [9.15, 7.2], [11.5, 7.2], [3.03, 4.23], [12.2, 7.83], [2.02, 4.47], [1.05, 3.33], [4.05, 4.96], [6.03, 7.24], [12.0, 6.26], [12.0, 8.84], [7.08, 5.82], [5.02, 5.68]],type: 'scatter'        //散点图类型}]
};

echarts学习笔记相关推荐

echarts学习笔记1
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. [外链图片转存失败,源站可 ...
数据可视化echarts学习笔记
文章目录 echarts 使用渐变色一些配置项 dataset与transform数据过滤 dataset transform 动态排序时间轴更新数据极坐标系 echarts 官网https: ...
ECharts 学习笔记
ECharts添加点击事件(基于饼图): var option = {... } myChart.setOption(option); myChart.on('click', function eCo ...
2023-01-03 Echarts学习笔记(二) 常见Option配置项介绍:xAxis,yAxis,series,grid,toolbox,legend,tooltip,title,color等
Echarts的基础配置 1.color:调色盘颜色列表 2.title:标题组件 2.1.设置图表的标题 2.2.同时主标题和副标题(了解) 3.tooltip:提示框组件触发类型 4.legen ...
我的Echarts学习笔记(Update)
第一章下载echarts 1.源文件代码:https://www.jsdelivr.com/package/npm/echarts 里面4.8版本的dist文件夹下面的文件 2.地图数据网站:htt ...
ECharts数据可视化学习笔记和应用
ECharts数据可视化学习笔记和应用一.概念二.Echarts使用使用步骤三.Echarts-基础配置四.柱状图图表1 五.柱状图图表2 六.折线图1 七.折线图2 八.饼状图1 九.饼形 ...
Vue学习（slot、axios）-学习笔记
文章目录 Vue学习(slot.axios)-学习笔记 slot 插槽 axios 交互 Vue学习(slot.axios)-学习笔记 slot 插槽父: <template> < ...
学习笔记之数据可视化（二）—— 页面布局（下）
续上一章 2.7 地图区域(.map) 2.7.1 实现步骤: 2.8 用户统计模块 2.8.1 布局: 2.8.2 柱状图 2.9 订单模块 2.9.1 订单区域布局 2.9.2 订单区域(orde ...
学习笔记之数据可视化（二）——页面布局（中）
续上一章 2.6 监控区域布局 2.6.1 布局结构解析: 2.6.2 样式描述: 2.6.3 HTML结构及CSS样式代码 2.6.3 ### 监控区域-效果 2.6.7 点位区域(point) 2 ...

echarts学习笔记