echar图柱状图和折线图混合加双侧y轴坐
时间:2020-03-26
本文章向大家介绍echar图柱状图和折线图混合加双侧y轴坐,主要包括echar图柱状图和折线图混合加双侧y轴坐使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
代码如下:
floorSalesBar(){//方法名====这个方法应该放在methods中并在mounted中调用哦
methods
let _this = this;
let myChart = _this.$echarts.init(document.getElementById('floorSales'));
let option = {
color:['#ff6100','#ffa836','#d9822a'],
legend: {
data: ['销售', '同比', '环比']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,
data: ['L3', 'L6', 'L5', 'L11', 'L19', 'L4', 'L9']
},
yAxis: [//这里两个坐标轴,因为下面用的数据有柱状图和折线图,而他们的一个是数值,一个是百分比因此数的范围不一样,因此这里要加入id来定义坐标轴的标记下面 yAxisIndex相对应其标记号就可以取这个坐标轴线了
{
name: '销售',
type: 'value',
id:0,
max: 500
},
{
name: '%',
nameLocation: 'end',
max: 100,
id:1,
type: 'value',
}
],
series: [
{
name: '销售',
type: 'bar',
barMaxWidth:25,//柱状图的宽度
yAxisIndex:0,//对应y轴的那一组坐标
label:{
show:true,
position:'insideTop'//柱状图上文字的位置
},
itemStyle:{
barBorderRadius: [7, 7, 0, 0]//柱状图的边框
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '同比',
type: 'line',
yAxisIndex:1,
data: [20, 18, 11, 34, 90, 33, 10]
},
{
name: '环比',
type: 'line',
yAxisIndex:1,
data: [50, 32, 21, 15, 90, 30, 40]
}
]
};
window.onresize = function () {
myChart.resize();
};
// 为echarts对象加载数据
myChart.setOption(option);
}
}
}
原文地址:https://www.cnblogs.com/whdaichengxu/p/12575232.html
- 这或许是对小白最友好的python入门了吧——10,元组
- Extjs 在项目中碰到问题
- 网站防刷方案
- 如何正确的猜拳:反事实遗憾最小化算法
- 使用python中的Numpy进行t检验
- 实操 Web Cache
- 怎样制作RPM包
- 框架设计原则和规范(完)
- 这或许是对小白最友好的python入门了吧——9,数字深入体验
- WebAPI返回数据类型解惑 以及怎样解决Extjs无法解析返回的xml
- 图像处理:利用神经网络生成新图像和修复旧图像
- 这或许是对小白最友好的python入门了吧——8,初识for语句
- Extjs 项目中常用的小技巧,也许你用得着(3)
- 对于Ext.data.Store 介紹 与总结,以及对以前代码的重构与优化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Ubuntu16.04环境下搭建FTP服务器的教程
- Linux 查看空间使用情况的实例详解
- CentOS 6.8 安装vsftpd的方法步骤
- centos7下搭建ZooKeeper3.4中间件常用命令小结
- Linux性能测试 pmap命令详解
- Linux7.7设置交换分区SWAP的方法
- 在Linux里安装和启动nginx的方法
- Linux下如何对ISO文件编辑的方法示例
- Linux中创建新用户并赋予指定目录的相关权限
- Linux服务器下安装配置Nginx的教程
- Linux文件目录结构(小白版)
- 基于Linux中vnc配置端口号的修改方法
- Linux下安装grafana并且添加influxdb监控的方法
- 玩命学JVM:认识JVM和字节码文件
- 使用CatBoost进行不确定度估算:模型为何不确定以及如何估计不确定性水平