代码如下:

    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. python js正则表达式

    一.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m 表示多行匹配JS正则匹配时本身就是支持多行,此处多行匹配只是影响正则表达 ...

  2. 吴裕雄--天生自然KITTEN编程:角色移动

  3. 【深圳·招聘】QQ音乐测试工程师-职位内推

    QQ音乐测试工程师 岗位职责 负责腾讯QQ音乐移动端/后台/web相关特性测试分析和执行,保障发布质量. 岗位要求 专业本科及以上学历,计算机/软件工程/信息管理/数学与应用数学/自动化/通信工程/电 ...

  4. vagrant 虚拟机配置最佳实践

    Mac VirtualBox Vagrant 管理虚拟机 这篇文章定位是在理解了 vagrant 相关概念之后,教你如何灵活玩转自己的虚拟机配置 本文为 @favoorr 常用的 Mac Virtua ...

  5. 06.深入浅出 Spring Boot - 数据访问之Druid

    代码下载:https://github.com/Jackson0714/study-spring-boot.git 一.Druid是什么? 1.Druid是数据库连接池,功能.性能.扩展性方面都算不错 ...

  6. 一行python代码搞定文件分享

    给同事分享文件,如你所知通过聊天工具,网盘或linux命令各种方法,还有一个也可以尝试下:使用一行python代码快速搭建一个http服务器在局域网内进行下载. python3使用: python3 ...

  7. 万字硬核干货!6大技巧,极速提升kubectl的生产力!

    明晚8:30,k3s实战课程开启!将由Rancher研发总监带你畅游k3s与边缘AI的奇妙世界.课程内容完全由实际使用场景中总结而来,别错过啦~!访问以下链接即可传送到课程现场: http://z-m ...

  8. 7-41 jmu-python-最佳身高 (10 分)

    最佳的情侣身高差遵循着一个公式:(女方的身高)×1.09 =(男方的身高).下面就请你写个程序,为任意一位用户计算他/她的情侣的最佳身高. 输入格式: 输入第一行给出正整数N(≤10),为前来查询的用 ...

  9. 利用canvas绘画二级树形结构图

    上周需要做一个把页面左侧列表内容拖拽到右侧区域,并且绘制成关系树的功能.看了设计图,第一反应是用canvas绘制关系线.吭哧吭哧搞定这个功能后,发现用canvas绘图,有一个很严重的缺陷.那就是如果左 ...

  10. FC及BFC

    1.什么是FC 2.BFC块级格式化上下文(Block formatting context) Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类 ...