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 ...
随机推荐
- 腾讯云服务器(centos7.2)上安装MySQL
1.到MySQL官网找到相应的版本 https://dev.mysql.com/downloads/repo/yum/ 找到下面的Linux7,即CentOS7(CentOS是Red Hat旗下的)点 ...
- Python 学习之Anaconda 设置默认打开chrome 浏览器
笔者遇到的问题如何设置jupyter notebook 打开chrome 浏览器 1.打开anaconda prompt 2.输入jupyter notebook --generate-config ...
- 扎心!来自互联网er的2019年度总结,看完笑着流泪……
转眼2019年已经接近尾声,又到了年度总结的时候了.过去一年,你加了多少班,熬了多少夜,回想起来历历在目.互联网人2019年度总结,看完扎心了-- 01 - 这一年里 你一共提了275个需求 其中27 ...
- JavaScript中的document.fullscreenEnabled
本文主要讲述了: 什么是document.fullscreenEnabled 作用 兼容性 正文 什么是document.fullscreenEnabled document.fullscreenEn ...
- golang实现chunk方式的查询
有一个需求,是把表里面所有的数据都查询出来,并且生成json文件.因为一张表里面的数据很多,所以不可能一次性全部查询出来,所以需要用到chunk.之前用的gorm,但是发现gorm没有chunk方式的 ...
- WiFi产生电磁辐射或让人想去自杀
随着互联网在生活中的地位越来越重要,WiFi作为一种无线连接方式给了用户极大的便捷,然而有一部分科学家提出WiFi产生的电磁反应会对人的健康受到影响.面对这种说法,我们一直以为是专家在危言耸听,但是如 ...
- 「NOIP 2017」列队
题目大意:给定一个 $n times m$ 的方阵,初始时第 $i$ 行第 $j$ 列的人的编号为 $(i-1) times m + j$,$q$ 次给出 $x,y$,让第 $x$ 行 $y$ 列的人 ...
- sublime 安装Anaconda插件 配置python开发环境
我的sublime 3 python 3.6.6 安装Anaconda插件 由于Anaconda插件本身无法知道Python安装的路径,所以需要设置Python主程序的实际位置.选择Settings ...
- bootstrap简介与入门
bootstrap前端框架 1.概念:一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的,它 ...
- 深度学习遥感影像(哨兵2A/B)超分辨率
这段时间,用到了哨兵影像,遇到了一个问题,就是哨兵影像,它的RGB/NIR波段是10米分辨率的,但是其他波段是20米和60米的,这就需要pansharpening了,所以我们需要设计一种算法来进行解决 ...