echarts常用配置项整合之xAxis，yAxis

xAxis: {//类目轴type: 'category',boundaryGap: true,//设置x轴文字的每个字样式（对于yAxis同样适用）axisLabel: {show: false//默认使用true有的时候不需要，就可以设置成truetextStyle: {show: true,fontFamily: '微软雅黑',color: "#fff",fontSize: '15',},},// 控制x轴的轴线显示与隐藏（对于yAxis同样适用）axisLine: {show: false, // 原来x轴的默认横线取消掉，重新设置lineStyle: {type: 'dashed', // 网格线样式//   dashOffset: 5color: 'rgba(255, 255, 255,0.3)'}},// 设置x轴竖着的每一列的线条样式（对于yAxis同样适用）splitLine: {show: false// lineStyle: {//   type: 'dotted', // 网格线样式//   //   dashOffset: 5//   color: 'rgba(255, 255, 255,0.3)'// }} // 不去除网格线//不展示坐标轴刻度axisTick: { show: false },data: Echartdata.xdata},

yAxis: {type: 'value',//让y轴上的每条横线显示并且是dashed类型splitLine: {show: true,lineStyle: {type: 'dashed',//类型和线条的颜色及透明度color: 'rgba(255, 255, 255,0.3)'}}},

折线图
series: [{name: '未戴安全帽',type: 'line',stack: 'Total',data: Echartdata.yyan},{name: '违规抽烟',type: 'line',stack: 'Total',data: Echartdata.ydai},{name: '未戴安全带',type: 'line',stack: 'Total',data: Echartdata.ydai},{name: '违规动火',type: 'line',stack: 'Total',data: Echartdata.yhuo},{//另加一个series，配置折线图的每个项的背景色data: [0, 0, 0, 0, 0, 0, 0],type: 'bar',barWidth: 100, // 设置柱子的宽度//是否展示每根柱子的背景showBackground: true,backgroundStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(10, 50, 100, 0.2)'}, {offset: 1,color: 'rgba(3, 9, 37, 0.2)'}]),}},{//另加一个series，配置折线图的每个项的背景色data: [0, 0, 0, 0, 0, 0, 0],type: 'bar',barWidth: 100, // 设置柱子的宽度//是否展示每根柱子的背景showBackground: true,backgroundStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(10, 50, 100, 0.2)'}, {offset: 1,color: 'rgba(3, 9, 37, 0.2)'}]),}},]

柱图
series: [{type: 'line',data: testData.list?.people_24hour_nums,symbol: 'emptyCircle',symbolSize: 15,//折线图的每个点所连区域下的颜色渐变areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(58,77,233,0.8)'},{offset: 1,color: 'rgba(58,77,233,0.3)'}])},itemStyle: {normal: {// color: 'red',shadowBlur: 15,shadowColor: "rgba(0, 0, 0, .12)",shadowOffsetX: 2,shadowOffsetY: 2// shadowColor: 'blue',// shadowOffsetX: 10,// shadowOffsetY: 2}},},{//另加一个series，配置折线图的每个项的背景色data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],type: 'bar',barWidth: 60, // 设置柱子的宽度//是否展示每根柱子的背景showBackground: true,//给柱子设置渐变色itemStyle: {normal: {// barBorderRadius: 20,color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 1,color: '#082858',},{offset: 0.5,color: '#000F32',},{offset: 0.4,color: '#000F32',},{offset: 0.1,color: '#082858',},]),},},z: 1,backgroundStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(10, 50, 100, 0.2)'}, {offset: 1,color: 'rgba(3, 9, 37, 0.2)'}]),},}]

饼图
series: [{name: 'Nightingale Chart',type: 'pie',radius: [20, 100],//调整饼图的位置，上下左右center: ['50%', '90%'],//调整饼状图的角度startAngle: 180,roseType: 'area',itemStyle: {borderRadius: 1},//设置提示的字label: {color: '#fff',fontSize: 12},// { value: 40, name: `30-40岁/${res.value}%` },//   { value: 38, name: '20-30岁' },//   { value: 32, name: '40-50岁' },//   { value: 30, name: '50-60岁' },//   { value: 23, name: '20岁以下' },//   { value: 19, name: '60岁以上' },// data: [//   // ...obj.arr,//   ...laObj.value,//   // ...gg,//   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },//   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },//   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },//   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },//   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },//   { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },// ]data: c.value,}]

echarts常用配置项整合之xAxis，yAxis相关推荐

ECharts常用配置项
ECharts常用配置 setOption()绘制图表使用 echarts 实例的 setOption() 可以设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOpti ...
ECharts常用配置项学习
主题暗黑模式由darkMode指定,会根据backgroundColor的亮度自动设置. ECharts会根据是否是暗黑模式自动调整文本等的颜色. 坐标轴 xAxis.yAxis类型由type指 ...
echarts配置项图文介绍——xAxis
echarts配置项图文介绍--xAxis 本文仅用于个人学习笔记,文中出现错误或不恰当请在评论区指出.本文仅介绍稍有难度的配置项,极其简单易懂的配置项请自行移步官网查阅文档. 一.用途直角坐标系 ...
ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」
文接上篇 ECharts 入门知识 ECharts 入门真的很简单 ,本文继续介绍 ECharts 常用图表相关内容. 一.散点图散点图多用于推断不同维度数据之间的相关性,如下图判断身高体重相关性散 ...
ECharts常用图表饼图
1.图表4 饼图 1.1.饼图的实现步骤步骤1 ECharts 最基本的代码结构此时 option 是一个空空如也的对象步骤2 准备数据步骤3 准备配置项在 series 下设置 type: ...
Apache Echarts常用图表之柱状图
文章目录 Echarts常用图表柱状图 1. 柱状图的实现步骤 2. 柱状图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 数值显示 `label` 柱宽度 `ba ...
Apache Echarts常用图表之折线图
文章目录 Echarts常用图表折线图 1. 折线图的实现步骤 2. 折线图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 标注区间 `markArea` 数值显示 ...
Echarts常用属性---附智能看板素材
title/tooltip/legend/toolbox/grid /x/yAxis/series/color 当然实际作图中这些是不够滴,只是罗列出了最常用八大项,素材在最下面 title 标题组 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

echarts常用配置项整合之xAxis，yAxis

echarts常用配置项整合之xAxis，yAxis相关推荐

最新文章

热门文章