Echarts实战案例代码(52):双轴折线图的配置

简介: Echarts实战案例代码(52):双轴折线图的配置

 var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var option = {
        legend: {
            data: ['波长', '物理量']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: {
            type: 'category',
            data: ['12:03:04', '12:03:05', '12:03:06', '12:03:07', '12:03:08', '12:03:09', '12:03:10']
        },
        yAxis: [
            {
                "type": "value",
                "name": "波长(单位,BM)",
                "axisLabel": {
                    "show": true,
                },
                axisLine: {lineStyle: {color: 'rgba(0,0,0,.4)'}},
                splitLine: {show: true, lineStyle: {color: 'rgba(0,0,0,.2)'}}
            },
            {
                "type": "value",
                "name": "物理量(单位,CM)",
                "show": true,
                "axisLabel": {
                    "show": true,
                },
                axisLine: {lineStyle: {color: 'rgba(0,0,0,.4)'}},
                splitLine: {show: false}
            },
        ],
        series: [{
            name: '波长',
            yAxisIndex: 0,
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }, {
            name: '物理量',
            yAxisIndex: 1,
            data: [120, 232, 301, 434, 590, 630, 700],
            type: 'line',
            smooth: true
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }


Done!

相关文章
|
3月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
158 1
|
1月前
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
40 1
|
1月前
|
XML 前端开发 数据格式
echarts柱图前后端代码SpringCloud+Vue3
echarts柱图前后端代码SpringCloud+Vue3
53 1
|
3月前
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
53 0
|
5月前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
149 3
ECharts综合案例一:近七天跑步数据
|
3月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
134 0
|
5月前
|
数据采集 自然语言处理 数据可视化
ECharts 词云案例四—电影《千与千寻》部分短评
**使用ECharts和电影《千与千寻》短评创建的词云案例展示了数据可视化的力量。通过Python处理评论,提取关键词并计算频率,利用jieba和WordCloud生成词云,ECharts进一步增强了视觉效果。词云突出了角色如“千寻”、“无脸男”及关键词“勇气”、“成长”,揭示了观众的情感共鸣。示例代码和资源可在链接中获取。**
50 0
 ECharts 词云案例四—电影《千与千寻》部分短评
|
4月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
407 0
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
61 1
|
1月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
268 0

热门文章

最新文章

下一篇
无影云桌面