Vue 中echarts的数据参数使用、X轴Y轴

Echarts 柱状图配置详解 - 龙恩0707 - 博客园

ECharts图表设置x轴和y轴显示数值_King汀的博客-CSDN博客_echarts设置y轴数值

echarts柱状图渐变色_kylvia的专栏-CSDN博客_echarts 柱子渐变色 eCharts——柱状图中的柱体颜色渐变

Echarts设置背景的网格线为虚线_祈澈菇凉-CSDN博客 Echarts设置背景的网格线为虚线

echarts bar series下的label position的属性值_MistyWood的博客-CSDN博客_echarts label position echarts bar series下的label position的属性值

Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总 - 知乎Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总

稍微总结一下echar 柱状图的参数修改

修改图形整体位置grid: {top: 36,left: "1%",// right: "1%",bottom: 0,containLabel: true,borderColor: "#282f47",show: true,},
修改图顶部小图 找legend
legend: {data: [{ name: "使用量(次)", itemStyle: { color: "#085574" } },{name: "效益(人/每天)",itemStyle: {color: "#166047",},},{name: "使用率(%)",icon: "path://M63.6 489.6h896.7v44.8H63.6z",},],top: "3%",x: "center",textStyle: {color: "#FFF",fontSize: "12px",},},
1.修改x轴找
xAxis: {data: ["汕头", "佛山", "珠海", "广州", "深圳"],//值show:false,//完全隐藏x轴interval: 25,//x轴数字间距axisTick: { //轴刻度show: false,},splitLine: { //x轴网格show: true,lineStyle: {color: ["#282f47"],width: 1,},},axisLine: { //X轴线show: true,lineStyle: {color: "white",//x轴线颜色},},axisLabel: {//X轴文字show:true,//是否显示x轴interval: 0, //显示x轴所有内容 间距margin: 14,fontSize: 12,textStyle: {color: "#fff", //X轴文字颜色},},},2.修改y轴找
yAxis: [{type: "value",gridIndex: 0,min: 0,max: 100,show:false,//完全隐藏y轴 -推荐interval: 25,//y轴数字间距axisTick: { //刻度线show: false,},axisLine: { //y轴网格show: true,lineStyle: {color: "rgba(77, 128, 254, 0.2)",},},axisLabel: { //y轴文字show: true,//是否显示Y轴margin: 14,fontSize: 14,color: "#c0c3cd",//文字颜色},},{type: "value",min: 0,max: 100,show:false,//完全隐藏y轴 -推荐interval: 20,axisLabel: {show: true, //是否显示Y轴fontSize: 14,color: "#c0c3cd",},splitLine: {show: false,lineStyle: {color: "rgba(211,228,255,0.08)",},},},],
3.修改提示框找tooltip: {trigger: "axis",show: true,backgroundColor: "rgba(0, 0, 0, 0.3)",borderColor: "rgba(224, 224, 224, 0.4)",borderWidth: 2,borderRadius: 4,textStyle: {color: "#fff",fontSize: 14,},formatter: function (params) {console.log(params, "params");return ("<div>" +"使用人次：" +params[0].data +"人" +"</div>" +"<div>" +"使用量：" +params[1].data +"次" +"</div>" +"<div>" +"效益：" +params[2].data +"人/天" +"</div>");},},
4.修改柱状图背景色，宽度等找
series: [{name: "打底",type: "bar",barWidth: 20,yAxisIndex: 0,animation: false,showBackground: true,tooltip: { show: false },backgroundStyle: {color: "rgba(23, 230, 255, 0.05)",borderColor: "rgba(39, 182, 255, 0.15)",borderWidth: 1,},},{name: "使用量(次)",barGap: 0.1, //柱状图不重叠type: "pictorialBar",symbol: "rect",symbolRepeat: true,barWidth: 15,symbolMargin: 2,itemStyle: {normal: {label: {show: true, //开启显示position: "top", //在上方显示textStyle: {//数值样式color: "rgba(250,250,250,0.6)",fontSize: 16,},},color: "#085372",},},data: [21, 43, 56, 32, 64],z: 10,zlevel: 0,},{yAxisIndex: 0,name: "效益(人/每天)",type: "pictorialBar",symbol: "rect",symbolRepeat: true,barWidth: 15,symbolMargin: 2,itemStyle: {normal: {label: {show: true, //开启显示position: "top", //在上方显示textStyle: {//数值样式color: "rgba(250,250,250,0.6)",fontSize: 16,},},color: "#1d724e",},},data: [51, 23, 21, 34, 22],z: 10,barGap: 0.1, //柱状图不重叠zlevel: 0,},],

Echart 赋值

<script>
import * as echarts from "echarts";
const chartOption = {tooltip: {trigger: "axis",},grid: {top: "50",left: "1%",right: "1%",bottom: 5,containLabel: true,},legend: {data: ["当月完成值（亿）", "累计同比增幅（%）"],top: 20,right: 0,textStyle: {color: "#FFF",fontSize: "12px",},},xAxis: [{type: "category",data: months,axisLabel: {color: "#A7C6CD",fontFamily: "PingFangSC-Medium",fontSize: 13,fontWeight: 500,interval: 0,},},],yAxis: [{type: "value",min: 0,max: 1900,interval: 200,axisLabel: {color: "#A7C6CD",fontFamily: "PingFangSC-Medium",fontSize: 13,},splitLine: {show: true,lineStyle: {color: "rgba(211,228,255,0.08)",},},},{type: "value",min: 0,max: 70,interval: 20,axisLabel: {show: false, //是否显示次Y轴color: "#A7C6CD",fontFamily: "PingFangSC-Medium",fontSize: 13,formatter: "{value}%",},splitLine: {show: true,lineStyle: {color: "rgba(211,228,255,0.08)",},},},],series: [// 背景{name: "打底",type: "bar",barWidth: 20,yAxisIndex: 0,showBackground: true,tooltip: { show: false },backgroundStyle: {color: "rgba(23, 230, 255, 0.05)",borderColor: "rgba(39, 182, 255, 0.15)",borderWidth: 1,},data: (() => {const arr = [];let max = 12;while (max--) {arr.push(0);}return arr;})(),},{name: "当月完成值（亿）",type: "pictorialBar",symbol: "rect",barWidth: 16,symbolRepeat: true,symbolSize: [15, 8],symbolMargin: 2,yAxisIndex: 0,data: (() => {const arr = [];let max = 12;while (max--) {arr.push(0);}return arr;})(),label: {show: true,position: "top",fontFamily: "MicrosoftYaHei",fontSize: 12,color: "#FFF",},},{name: "累计同比增幅（%）",type: "line",yAxisIndex: 1,lineStyle: {shadowColor: "rgba(255,168,0, 0.5)",shadowBlur: 10,shadowOffsetY: 5,},label: {show: true,position: "top",fontFamily: "MicrosoftYaHei",fontSize: 12,color: "white",// formatter: function (parms) {//   return parms.value + "%";// },},},],color: ["rgba(23, 230, 255, 0.05)", "#22D7F0", "#FFE200"],
};mounted() {const myChart = (this.chart = echarts.init(document.querySelector(".financialai-container")));if (chartOption) {myChart.setOption(chartOption);myChart.on("click", param => {console.log(param);this.$emit("sendAiDialog", param.name);});}},//覆盖options里面的属性
onDataUpdate(data) {if (data) {this.chart.setOption({xAxis: [{data: null,},],series: [{}, { data: data.income }, { data: data.increase }],});}},
</script>.financialai-container {height: 250px;width: 100%;
}

barGap: "-140%", //两个图像不重叠

series: [{name: "使用量(次)",type: "pictorialBar",},{name: "效益(人/每天)",type: "pictorialBar",barGap: "-140%", //柱状图不重叠 一般给第二个加  -100%重叠 0 完全分开 -140% 部分重叠},],

echarts 初始化两种写法1.推荐
const chart = this.$refs.chartif (chart) {//var myChart = this.$echarts.init(chart); //这种写法打包报错init var myChart = echarts.init(chart); //推荐const option = {...}myChart.setOption(option)
}2.
this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
var option = {...}
this.chartLine.setOption(option)

柱形图：圆角渐变echarts设置图标图例legend多种形状 - lpmou - 博客园

legend: {data: [{ name: "使用量(次)", itemStyle: { color: "#085574" } },{name: "效益(人/每天)",itemStyle: {color: "#166047",},},{name: "使用率(%)",icon: "line",//  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，noneitemStyle: {color: "#ffa800",},},],top: "3%",x: "center",textStyle: {color: "#FFF",fontSize: "12px",},},itemWidth: 10,  // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 40 // 设置间距itemStyle: {normal: {barBorderRadius: [20, 20, 0, 0], //柱形图圆角，初始化效果color: new echarts.graphic.LinearGradient(0,1,0,0,[{offset: 0,color: "#8cd7f5", // 0% 处的颜色},{offset: 0.6,color: "#4dc0f1", // 60% 处的颜色},{offset: 1,color: "#14aeed", // 100% 处的颜色},],false),},},

barBorderRadius:[10, 10, 10, 10] 表示右上，右下，左下，左上的边框弯曲像素值

label position的属性值：

1.
inside(自适应，柱状内部中央),top（柱状外的正上方）,bottom(柱状外的正下方)，left(柱状外的左边)，right(柱状外的右边)2.
坐标[x,y](以柱状的顶部为原点)3.
insideTop(柱状内部靠顶部)，insideBottom(柱状内部靠下方)，insideRight(柱状内部靠右边)，insideLeft(柱状内部靠左边)

在 Echarts 文档中查找设置图标位置，设置条形图的位置，设置饼状图的位置，找到很艰辛。

设置条形图的位置通过 option.grid 的 x 属性设置图形 x 轴方向距左上角的位置，x、y、x2、y2 的的含义如下图：
设置饼状图的位置通过 series.center 属性，默认是 [50%, 50%].

getRobotEchartData() {const chart = this.$refs.chart1;if (chart) {var myChart = this.$echarts.init(chart);let xdata = ["2020-06","2020-07","2020-08","2020-09","2020-10","2020-11",];let ydata = [44, 1800, 100, 999, 222, 333];const option = {trigger: "axis", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。只有设置了这个参数才会出现竖直的线条axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "bar", //指示器类型。},title: {text: "机器人任务总量（单位:个）", //图表名字textStyle: {fontSize: 14, //图表名字字体大小},},grid: {//设置图表位置x: 80,y: 60,x2: 80,y2: 60, //增加柱形图纵向的高度// width: {totalWidth} - x - x2,// height: {totalHeight} - y - y2,containLabel: true,backgroundColor: 'rgba(0,0,0,0)',borderWidth: 1,borderColor: '#ccc'},legend: {data: [ '邮件营销', '联盟广告', '视频广告']},barWidth: 20, //总设置柱状图的柱形宽度color: ["#9fbff0"], //柱形背景// ---  悬浮提示框 ----tooltip: {show: true, // 是否显示提示框，默认为truetrigger: "item", // 数据项图形触发axisPointer: {// 指示样式type: "shadow",axis: "auto",},padding: 5,textStyle: {color: "#fff", // 提示框字体颜色},},xAxis: {data: xdata, //x轴的每个标题数据!!!axisLine: {symbol: ["none", "arrow"], // 是否显示轴线箭头symbolSize: [6, 6], // 箭头大小symbolOffset: [0, 7], // 箭头位置},name: "月份", //x轴名字type: "category",axisTick: {alignWithLabel: true, //保证刻度线和标签对齐length: 1, //刻度的长度。},axisLabel: {inside: false, // 是否朝内interval: 0, //横轴标题信息全部显示rotate:-15,//标题-15度角倾斜显示showMaxLabel: true,//最后一个显示formatter: function (value) {return value.split("").join("\n");}, //文字竖展示textStyle: {color: "#000", //x轴的标题字体颜色fontSize: "9", //x轴的标题字体大小itemSize: "",},},},yAxis: [{min: 0, //y轴最小值max: 1800, //y轴最大值splitLine: { show: true, lineStyle: { type: "dashed" } }, //设置背景为虚线type: "value",},],series: [{data: ydata,name: "销量", // 序列名称type: "bar", // 类型legendHoverLink: true, // 是否启用图列 hover 时的联动高亮showBackground: false,barWidth: 15, // 柱形的宽度itemStyle: {// 图形的形状normal: {barBorderRadius: [15, 15, 0, 0],//柱形图圆角color: new echarts.graphic.LinearGradient(//柱形背景渐变0,1,0,0,[{offset: 0,color: "#8cd7f5", // 0% 处的颜色},{offset: 0.6,color: "#4dc0f1", // 60% 处的颜色},{offset: 1,color: "#14aeed", // 100% 处的颜色},],false),},},//itemStylelabel: {//柱子上方显示文字与图标normal: {show: true,position: "outside",//inside insideRight bottomtextStyle: {color: "black",},formatter: function (params) {return params.value;},},},//柱子上方显示文字与图标 这种直接写也行label: {show: true,position: "top",distance: 10,color: "#fff",},},],};myChart.setOption(option);}},

Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总 - 知乎 Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总

Echarts | 饼图引导线周围文字位置的改变 Echarts | 饼图引导线周围文字位置的改变 - 简书

可以看到，二图中文字和线的相对位置是不一样的。需求的样式，可通过设置label > padding和labelLine > length / length2来实现。关键点在于设置一个负的padding。

饼状图：


var option = {title: {// text: "- 流程执行数量统计图 -",left: "left",textStyle: {fontSize: 12, //图表名字字体大小},},tooltip: {trigger: "item",},legend: {bottom: "0%",itemWidth: 25, //图例标记的图形宽度itemHeight: 14,orient: "vertical",},//设置饼状图每个颜色块的颜色color : [ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ],series: [{name: "数据",type: "pie",radius: ["35%", "70%"], //饼状图空心占比 饼状图大小//radius: "70%", //设置饼图大小//center: ["50%", "50%"], //设置饼图位置 左右 上下labelLine: {//设置饼图上的线条长度normal: {length: 20,length2: 70,lineStyle: {color: '#333'}}},avoidLabelOverlap: false,label: {normal: {formatter: "{b}:{c}" + "\n\r" + "({d}%)",show: true,position: "left",padding: [0, -40],//设置文字位置textStyle: {fontSize: 12, //字体大小lineHeight: 18, //行高},rich: {//加这个rich 上面的行高生效...a:{fontSize: 12,lineHeight: 18,},},emphasis: {show: true,textStyle: {fontSize: "12",},},},data: [{ value: 12, name: "待执行" },{ value: 23, name: "执行中" },{ value: 278, name: "执行成功" },{ value: 67, name: "执行失败" },{ value: 16, name: "已终止" },],},],};

Vue 中echarts的数据参数使用、X轴Y轴相关推荐

Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
Vue中如何进行数据可视化大屏展示
Vue中如何进行数据可视化大屏展示在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环.通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策.在Vue ...
vue项目Echarts更新数据是数据表展示错版
vue项目Echarts更新数据是数据表展示错版当我们第一次渲染数据的时候,echarts渲染是正常的,但是当我们的数据更新的时候,展示的图表会出现错版现象,其中最常见的是曲线图. 比如下面,刚开始 ...
Vue使用Echarts实现数据可视化
Vue使用Echarts实现数据可视化一,Echarts 1.1 获取ECharts 1.2 引入 ECharts 二,Vue使用Echarts 2.1 Vue环境 2.2 main.js引入Ech ...
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理目录 Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理一.简单介绍二. ...
vue中echarts自适应屏幕大小
vue中echarts自适应屏幕大小,延迟执行项目中出现echarts适应屏幕大小,有时会遇到不管屏幕大小如何变化echarts图表大小不变的情况:或者出现图表变化延迟的情况,针对这两种情况,分别解 ...
vue 中 echarts 中国地图
我们先来看一下效果说明:echarts 版本 "echarts": "^4.2.0-rc.2", 版本高的话,node_model 里面没有 map ...
Vue实现ECharts柱状图数据轮播（自动分页加载）
Vue实现ECharts柱状图数据轮播(自动分页加载) vue <div id="main"></div>``` js import echarts fro ...
vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来
vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...

Vue 中echarts的数据参数使用、X轴Y轴

Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总 - 知乎Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总

barGap: "-140%", //两个图像不重叠

柱形图：圆角渐变echarts设置图标图例legend多种形状 - lpmou - 博客园

barBorderRadius:[10, 10, 10, 10] 表示右上，右下，左下，左上的边框弯曲像素值

label position的属性值：

Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总 - 知乎 Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总

Echarts | 饼图引导线周围文字位置的改变 Echarts | 饼图引导线周围文字位置的改变 - 简书

饼状图：

Vue 中echarts的数据参数使用、X轴Y轴相关推荐

最新文章

热门文章

Vue 中echarts的数据参数使用、X轴Y轴

Echarts 饼状图显示信息,内容,值,百分比都显示的代码 更改图例等问题汇总 - 知乎Echarts 饼状图显示信息,内容,值,百分比都显示的代码 更改图例等问题汇总

barGap: "-140%", //两个图像不重叠

柱形图：圆角 渐变echarts设置图标图例legend多种形状 - lpmou - 博客园

barBorderRadius:[10, 10, 10, 10] 表示右上，右下，左下，左上的边框弯曲像素值

label position的属性值：

Echarts 饼状图显示信息,内容,值,百分比都显示的代码 更改图例等问题汇总 - 知乎 Echarts 饼状图显示信息,内容,值,百分比都显示的代码 更改图例等问题汇总

Echarts | 饼图引导线周围文字位置的改变 Echarts | 饼图引导线周围文字位置的改变 - 简书

饼状图：

Vue 中echarts的数据参数使用、X轴Y轴相关推荐

最新文章

热门文章

Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总 - 知乎Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总

柱形图：圆角渐变echarts设置图标图例legend多种形状 - lpmou - 博客园

Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总 - 知乎 Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总