echarts 双Y轴折线图

echarts 双Y轴折线图_第1张图片

import { useEffect, useState } from 'react';
import * as echarts from 'echarts';

/**
 * by Shiwu
 */

export default function DoubleLine() {
  useEffect(() => {
    const container = document.getElementById('DoubleLineContainer');
    console.log('DoubleLineContainer', container)
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(container);
    let option = {
      title: {
        text: '资产总览',
        top: 10,
        left: 10
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 鼠标移动覆盖 显示横坐标虚线
          type: 'cross'
        },
        formatter: "{a} 
{b} : {c}次"
}, // toolbox: { // show: true, // top: 10, // right: 10, // feature: { // mark: { show: true }, // magicType: { show: true, type: ['line', 'bar'] }, // restore: { show: true }, // saveAsImage: { show: true } // } // }, grid: { top: 60, right: 70, bottom: 30, left: 60 }, legend: { top: 0, left: 'center', data: ['资产数', '存储量'] }, calculable: true, xAxis: [ { type: 'category', splitLine: { show: false }, axisTick: { show: false }, data: ['201901', '201902', '201903', '201904', '201905', '201906', '201907', '201908', '201909', '201910', '201911', '201912'] } ], yAxis: [ { type: 'value', splitLine: { show: false }, // name:"管\n线\n查\n询\n次\n数\n︵\n次\n︶", // nameLocation:"center", // nameGap:35, // nameRotate:0, // nameTextStyle:{ // fontSize: 16, // }, //默认以千分位显示,不想用的可以在这加一段 axisLabel: { //调整左侧Y轴刻度, 直接按对应数据显示 show: true, showMinLabel: true, showMaxLabel: true, formatter: function (value) { return value; } }, }, { type: 'value', splitLine: { show: false }, // name:"在\n线\n调\n用\n次\n数\n︵\n次\n︶", // nameLocation:"center", // nameGap:35, // nameRotate:0, // nameTextStyle:{ // fontSize: 16, // }, //默认以千分位显示,不想用的可以在这加一段 axisLabel: { //调整左侧Y轴刻度, 直接按对应数据显示 show: true, showMinLabel: true, showMaxLabel: true, formatter: function (value) { return value; } } } ], series: [ { name: '资产数', type: 'line', smooth: true, yAxisIndex: 0, data: [35, 15, 8, 12, 11, 6, 3, 0, 0, 0, 0, 0], itemStyle: { normal: { label: { show: true } } }, }, { name: '存储量', type: 'line', smooth: true, yAxisIndex: 1, data: [0.1, 0.1, 0.1, 0.1, 0.7, 0.7, 0.7, 0.7, 0.3, 0.3, 0.3, 0.3], itemStyle: { normal: { label: { show: true } } }, } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }, []); return ( <div id="DoubleLineContainer" style={{ width: '100%', height: 400 }}></div> ); }

你可能感兴趣的:(echarts,echarts,javascript,ecmascript)