<div class="shichang-bar" id="shichangBar"></div>

echart案例

 export default {name: "shangyousuozhu",data() {return {};},components: {slotContent,},created() {},mounted() {this.shichangBar()},methods: {//市场主体培育柱状图shichangBar() {let that = this;let myChart = that.$echarts.init(document.getElementById("shichangBar"));let option = {color: ['#01E4FF','#FFA66B'],tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',crossStyle: {color: '#999'}}},grid: {// 网格的大小show:false,width: 330,height: 110,left: 55,bottom: 25,//网格背景色，默认透明。backgroundColor:'transparent',},// legend: {//   data: ['净增', '目标完成率']// },xAxis: [{type: 'category',data: ['2018年', '2019年'],//指示器类型:'line' 直线指示器,'shadow' 阴影指示器,'none' 无指示器axisPointer: {type: 'shadow'},//坐标轴刻度标签的相关设置axisLabel: {textStyle: {color: "#98ADD1",fontSize: 18,fontFamily: "PingFang SC",},},//坐标轴轴线相关设置。axisLine:{show:false,lineStyle:{color:'#98ADD1',}},//坐标轴刻度相关设置axisTick:{//是否显示坐标轴刻度show:false},//坐标轴在 grid 区域中的分隔线(是垂直于x轴的竖线)。splitLine:{show:false,}}],yAxis: [{type: 'value',name: '净增',min: 0,max: 4000,interval: 2000,axisLabel: {formatter: '{value}'},//坐标轴名称的文字样式(净增的字体样式)nameTextStyle:{fontSize: 16,fontWeight: 400,fontFamily:'PingFang SC',color: '#98ADD1'},// 是否显示坐标轴轴线。axisLine:{show: false, //y轴线不显示//y轴线和y轴线上文字的颜色(4000,2000,0)lineStyle:{color:'#98ADD1',}},//坐标轴刻度相关设置axisTick: {show: false,},//坐标轴在 grid 区域中的分隔线。(横线)//是否显示分隔线。默认数值轴显示，类目轴不显示splitLine: {show: true,lineStyle:{//分隔线颜色color:'#ABC9EC',}},},{type: 'value',name: '目标完成率(%)',min: 0,max: 200,interval: 100,axisLabel: {formatter: '{value}'},//坐标轴名称的文字样式(目标完成率的字体样式)nameTextStyle:{fontSize: 16,fontWeight: 400,fontFamily:'PingFang SC',color: '#98ADD1'},//坐标轴轴线相关设置axisLine:{//是否显示坐标轴轴线show:false,//坐标轴线线的样式lineStyle:{color:'#98ADD1',}},//坐标轴刻度相关设置axisTick: {show: false,},//坐标轴在 grid 区域中的分隔线。(横线)//是否显示分隔线。默认数值轴显示，类目轴不显示splitLine: {show: true,lineStyle:{//分隔线颜色color:'#ABC9EC',}},}],series: [{name: '净增',type: 'bar',// 柱子的宽度barWidth: '10',data: [3000, 2800]},{name: '目标完成率',type: 'line',barWidth: '66',//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。yAxisIndex: 1,data: [110, 120]}]};that.myChart = myChart;myChart.setOption(option);}}};

echart案例双刻度的坐标轴相关推荐

python使用matplotlib可视化：设置坐标轴的范围、设置主次坐标轴刻度、坐标轴刻度显示样式、坐标轴刻度数颜色、小数点位数、坐标轴刻度网格线、线条类型、数据点形状标签、文本字体、颜色、大小等
python使用matplotlib可视化:设置坐标轴的范围.设置主次坐标轴刻度.坐标轴刻度显示样式.坐标轴刻度数颜色.小数点位数.坐标轴刻度网格线.线条类型.数据点形状标签.文本字体.颜色.大小等 ...
R语言修改标题、坐标轴刻度、坐标轴名称的大小（cex.axis、cex.lab、cex.main函数）...
修改标题.坐标轴刻度.坐标轴名称的大小,用到了cex.axis.cex.lab.cex.main函数,其中,cex.axis表示修改坐标轴刻度字体大小,cex.lab表示修改坐标轴名称字体大小,cex ...
LabVIEW开发 XY Graph DoubleScale双刻度
LabVIEW开发 XY Graph DoubleScale双刻度试图在同一张图上绘制多个xy图.其中一些图需要在 Y 轴上以不同的方式缩放.如何动态打开其他 y 刻度并将多组数据绘制到不同的刻度, ...
R语言使用plot函数可视化数据散点图，自定义设置tck参数创建内部刻度、坐标轴刻度线在可视化图像内部
R语言使用plot函数可视化数据散点图,自定义设置tck参数创建内部刻度.坐标轴刻度线在可视化图像内部目录
matplotlib tricks（关闭坐标刻度、坐标轴不可见）
plt.gray():只有黑白两色,没有中间的渐进色 0. plt.xticks 关闭坐标刻度:plt.xticks([]) 旋转刻度: plt.xticks(x, labels, rotation= ...
EChart案例-半圆轮盘百分比图
先看效果图: 参数配置option: option = {title: {text: '98%',textStyle: {color: '#f97060',fontSize: 24},subtext: ...
案例：刻度时钟与数字时间
需求: 上方是简易的刻度时钟,下方是电子时钟,上下的时间需与北京时间实时对应. 实现原理: 1.利用元素圆角与宽高,位置,旋转角度制作一个时钟外表 2.设置计时器,更新获得的时间 3.将时钟圆盘分为1 ...
案例:双代号网络图在控制工程造价中的应用
如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭工程网络计划技术是应用网络图形来表示一项计划(或程)中各项工作的开展顺序及其相互之间 ...
大数据学习笔记22：MR案例——双MR统计总利润并排序
文章目录一.提出任务二.解题思路 1.第一个mr计算每个人总利润 2.第二个mr对总利润进行排序三.准备工作 1.启动hadoop服务 2.上传数据文件到HDFS 3.创建Maven项目Doub ...

echart案例双刻度的坐标轴

echart案例

echart案例双刻度的坐标轴相关推荐

最新文章

热门文章