代码如下:

    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轴坐的更多相关文章

  1. JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)

    import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...

  2. 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)

    第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...

  3. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

  4. FusionCharts 2D柱状图和折线图的组合图

    1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...

  5. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  6. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  7. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  8. 使用jfreechart生成柱状图、折线图、和饼状图

    JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...

  9. FusionCharts数据展示成饼状图、柱状图和折线图

    FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...

随机推荐

  1. linux安装fasttext报错,升级gcc后成功解决

    首先说一下存在问题: 本人打算在linux安装一个fasttext用来训练词向量,本来是想要从gensim来调用fasttext的,但是加载大的本地txt一直不对,没办法了只好在linux安装一个fa ...

  2. OPPO招聘-互联网测试

    邮       箱:ljy@oppo.com 工作地点:深圳

  3. USB描述符(转)

    //============================================================================// 文件名: USBDESC.C// 用 ...

  4. 推荐一款在UBUNTU下使用的编辑器

    偶然的机会 ,发现了这款软件,以前一直是在用gedit编辑器,但在WINDOWS下写的文档,在ubuntu下用gedit打开后,复制有换行的问题,一直没解决,所以在网上找到了这款软件,安装使用了几天, ...

  5. Go基础学习(二)

    数组[array] 数组定义[定义后长度不可变] 12 symbol := [...]string{USD: "$", EUR: "€", GBP: " ...

  6. Nginx 配置GeoIP2 禁止访问,并允许添加白名单过滤访问设置

    配置环境:Centos 7.6 + Tengine 2.3.2 GeoIP2 下载地址:https://dev.maxmind.com/geoip/geoip2/geolite2/ 1. Nginx  ...

  7. Burpsuite专题学习指南

    点击蓝色字体即可 开启你的Burp学习之旅BurpSuite系列(一)----Proxy模块(代理模块) BurpSuite系列(二)----Target模块(目标模块) BurpSuite系列(三) ...

  8. 可视化工作流程设计开发OA系统,一两个程序员就搞定!

    随着信息化的发展,越来越多的公司老板要求实现企业审批流程化.一个公司在初期,人员少,流程简单,员工也会经常不按工作流程来走,甚至有些跨部门的工作因为关系原因,没有走工作流程就实施,导致后期出现问题或者 ...

  9. 设计模式-12组合模式(Composite Pattern)

    1.模式动机 很多时候会存在"部分-整体"的关系,例如:大学中的部门与学院.总公司中的部门与分公司.学习用品中的书与书包.在软件开发中也是这样,例如,文件系统中的文件与文件夹.窗体 ...

  10. Azure Devops/TFS测试管理(下)

    紧接着 上篇 经过上篇折腾,我们已经有了: ①手工测试的流程规范 ②测试用例的管理 对于开发出身的我,我觉得一个项目上线流程应该主要瓶颈只能是开发本身,因为我认为最复杂过程应该就是开发,而肯定不能是测 ...