• 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,
  • },
  • ],
  • }
  • 效果图如下:

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

  • 相关阅读:
    95后们,为什么你借不到钱了?
    简单的增删改查
    [NSSCTF 2nd]Math
    Java并发编程系列32:线程池shutdown()和exs.isTerminated()结合使用
    vue前端项目配置
    【7-创建商城系统的子模块并将修改后的信息使用Git提交到Gitee上】
    数据分析与数据挖掘研究之一
    C++运算符重载+,*在QT中的实现演示
    MySQL -- 复合查询及内外连接
    speedpdf怎么免费合并多个pdf
  • 原文地址:https://blog.csdn.net/SM_Cute/article/details/134466795