• echarts 实现双y轴折线图示例


    该示例有如下几个特点:

            ①实现tooltip自定义样式(echarts 实现tooltip提示框样式自定义-CSDN博客

            ②legend左右区分展示

            ③双y轴折线展示

    代码如下:

    1. this.options = {
    2. grid: {
    3. left: "3%",
    4. right: "3%",
    5. top: "12%",
    6. bottom: "5%",
    7. containLabel: true,
    8. },
    9. tooltip: {
    10. show: true,
    11. trigger: "axis",
    12. textStyle: {
    13. align: "left",
    14. },
    15. className: "custom-tooltip-box",
    16. formatter: function (params) {
    17. return `
    18. ${params[0].name}
    19. ${params[0].seriesName}
    20. ${params[0].value}
  • ${params[1].seriesName}
  • ${params[1].value}
  • ${params[2].seriesName}
  • ${params[2].value}
  • `;
  • },
  • },
  • legend: [
  • {
  • show: true,
  • align: "left",
  • left: "5%",
  • textStyle: {
  • color: "#ffffff",
  • fontSize: "13",
  • },
  • itemWidth: 16,
  • itemHeight: 2,
  • itemGap: 13,
  • icon: "rect",
  • data: ["金额(十亿)"],
  • },
  • {
  • show: true,
  • align: "left",
  • right: "5%",
  • textStyle: {
  • color: "#ffffff",
  • fontSize: "13",
  • },
  • itemWidth: 16,
  • itemHeight: 2,
  • itemGap: 13,
  • icon: "rect",
  • data: ["项(千)", "件(千)"],
  • },
  • ],
  • xAxis: [
  • {
  • type: "category",
  • boundaryGap: false,
  • axisLine: {
  • show: true,
  • lineStyle: {
  • color: "#355d8d",
  • },
  • },
  • splitLine: {
  • show: true,
  • lineStyle: {
  • type: "dashed",
  • color: "#87C2FF66",
  • },
  • },
  • axisTick: {
  • show: false,
  • },
  • axisLabel: {
  • show: true,
  • margin: 14,
  • fontSize: 12,
  • textStyle: {
  • color: "#fff", //X轴文字颜色
  • },
  • },
  • data: this.yearList.x,
  • },
  • ],
  • yAxis: [
  • {
  • type: "value",
  • // name: "金额(十亿)",
  • min: 0,
  • // max: 200,
  • nameTextStyle: {
  • color: "#FFFFFF99",
  • },
  • axisLine: {
  • show: true,
  • lineStyle: {
  • color: "#355d8d",
  • },
  • },
  • splitLine: {
  • show: true,
  • lineStyle: {
  • type: "dashed",
  • color: "#87C2FF66",
  • },
  • },
  • axisLabel: {
  • margin: 14,
  • formatter: "{value}",
  • textStyle: {
  • color: "#FFFFFF99",
  • },
  • },
  • },
  • {
  • type: "value",
  • // name: "项(千)",
  • min: 0,
  • // max: 200,
  • nameTextStyle: {
  • color: "#FFFFFF99",
  • },
  • axisLine: {
  • show: true,
  • lineStyle: {
  • color: "#355d8d",
  • },
  • },
  • splitLine: {
  • show: true,
  • lineStyle: {
  • type: "dashed",
  • color: "#87C2FF66",
  • },
  • },
  • axisLabel: {
  • margin: 14,
  • formatter: "{value}",
  • textStyle: {
  • color: "#FFFFFF99",
  • },
  • },
  • }
  • ],
  • series: [
  • {
  • name: "金额(十亿)",
  • type: "line",
  • // stack: "总量",
  • symbol: "circle",
  • showSymbol: false,
  • smooth: true,
  • // symbolSize: 8,
  • itemStyle: {
  • normal: {
  • color: "#FF7474",
  • lineStyle: {
  • color: "#FF7474",
  • width: 2,
  • },
  • },
  • },
  • markPoint: {
  • itemStyle: {
  • normal: {
  • color: "pink",
  • },
  • },
  • },
  • yAxisIndex: 0,
  • data: this.yearList.money,
  • },
  • {
  • name: "项(千)",
  • type: "line",
  • // stack: "总量",
  • symbol: "circle",
  • showSymbol: false,
  • smooth: true,
  • // symbolSize: 8,
  • itemStyle: {
  • normal: {
  • color: "#FFD029",
  • lineStyle: {
  • color: "#FFD029",
  • width: 2,
  • },
  • },
  • },
  • yAxisIndex: 1,
  • data: this.yearList.item,
  • },
  • {
  • name: "件(千)",
  • type: "line",
  • // stack: "总量",
  • symbol: "circle",
  • showSymbol: false,
  • smooth: true,
  • // symbolSize: 8,
  • itemStyle: {
  • normal: {
  • color: "#00C2FF",
  • lineStyle: {
  • color: "#00C2FF",
  • width: 2,
  • },
  • },
  • },
  • yAxisIndex: 1,
  • data: this.yearList.num,
  • },
  • ],
  • }
  • 效果图如下:

    该示例中的属性可在官网中查阅,若有其他疑问可私信留言互相交流学习~

  • 相关阅读:
    sql数据类型,约束以及单表查询
    23、JAVA进阶——日期操作类
    【数据结构(郝斌)】03线性结构-总结----【待补充】
    Node.js 入门教程 14 使用 exports 从 Node.js 文件中公开功能
    云原生之Docker简介和环境准备
    25【中介者设计模式】
    python 的Chirp功能
    运筹说 第82期 | 算法介绍之图与网络分析(二)
    自动驾驶感知算法实战13——自动驾驶感知未来发展方向分享
    2023-09-27 LeetCode每日一题(餐厅过滤器)
  • 原文地址:https://blog.csdn.net/SM_Cute/article/details/134466795