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);
}
}
}
echar图柱状图和折线图混合加双侧y轴坐的更多相关文章
- JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)
import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...
- 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...
- FusionCharts 2D柱状图和折线图的组合图调试错误
在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...
- FusionCharts 2D柱状图和折线图的组合图
1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...
- HighCharts之2D柱状图、折线图的组合多轴图
HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...
- HighCharts之2D柱状图、折线图的组合双轴图
HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...
- HighCharts之2D柱状图、折线图和饼图的组合图
HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...
- 使用jfreechart生成柱状图、折线图、和饼状图
JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...
- FusionCharts数据展示成饼状图、柱状图和折线图
FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...
随机推荐
- Redis报错Can't save in background: fork: Cannot allocate memory及类似问题的处理方法
问题的发现及解决过程: 1.Redis主从复制(一主一从)环境在客户端用命令查看主从状态 在slave上输入命令显示如下: 在master上输入命令显示如下: 从显示可以看出主从关系出现问题,然后查看 ...
- 全平台Markdown笔记软件——Notable
简介 The markdown-based note-taking app that doesn't suck. 一款简介.跨平台的本地笔记软件,github地址:https://github.com ...
- Python计算给定日期的周内的某一天
先理一下思路:1.weekday会根据某个日期返回0到6的一个数字来表示星期几对吧,0==星期一我们来列一个表: [0,1,2,3,4,5,6] 2.知道了星期几之后,你可以计算出那一周相对于这个0到 ...
- 线上SpringCloud网关调用微服务跨机房了,咋整?
1.前言 公司内考虑到服务器资源成本的问题,目前业务上还在进行服务的容器化改造和迁移,计划将容器化后的服务,以及一些中间件(MQ.DB.ES.Redis等)尽量都迁移到其他机房. 那你们为什么不用阿里 ...
- JavaScript中点击按钮弹出新的浏览器窗口
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.js * 作者:常轩 * 微信公众号:Worldhel ...
- python爬虫所遇问题列举
1.通过python socket库来构造请求报文,向服务器发送图片请求时 (1)图片在浏览器请求头中的remote address信息跟通过python socket输出远程连接地址和端口号不一致 ...
- 自己动手用java写一个hashMap
入坑java很多年了,现在总结一下自己学到的东西. 1.首先我们先来聊聊什么是HashMap? 什么是hash?hash用中文的说法就叫做“散列”,通俗的讲就是把任意长度的字符串输入,经过hash计算 ...
- [译]HTML&CSS Lesson7: 设置背景和渐变色
背景对网站的设计有重大的影响.它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响. 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变色或者它们的组合.在我们决定如何 ...
- fsLayuiPlugin数据字典使用
概述 数据字典主要解决下拉框数据填充和数据表格转义处理,一个数据字典可以多处使用. 1.多个页面下拉框使用同样的数据,改一个地方需要把所有页面都要修改 2.数据表格转义代替自己手动写templet解析 ...
- php+mysql开发一个最简单的在线题库,在线做题系统!
题库,对于教育机构,学校,在线教育,是很有必要的,网上也有不少的第三方在线题库系统,但是本次案例,会让有需要的人了解题库的开发思路,其实很简单,无非就是一个表单验证,数据库验证. 1.先构建表单数据2 ...