JSFiddle - React, Tailwind, and code Playground

by onlyzdd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<div id="chart" style="width: 400px;height:200px;background-color:#000000;"></div>

JavaScript

var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;

const colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
    tooltip: {
        trigger: "axis",
        color: "red",
        axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
        textStyle: {
            fontSize: 10
        }
    },
    legend: {
        // data: ["好评", "差评"],
        orient: "horizontal", //垂直显示
        right: 10, //右边距
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
            fontSize: 10,
            fontFamily: "PingFangSC-Light",
            fontWeight: "300",
            color: "#FFFFFF",
        },
    },
    grid: {
        left: "8%",
        top: "15%",
        right: "4%",
        bottom: "0%",
        containLabel: true,
    },
    // x轴的颜色
    xAxis: {
        axisLine: {
            lineStyle: {
                color: "#467FE0",
            },
        },
        axisTick: {
            show: false,
        }, //隐藏刻度
        axisLabel: {
            show: true,
            rotate: 40,
            textStyle: {
                color: "#FFFFFF",
                fontSize: 12,
            },
        },
        // data: this.a
        data: ["11月22日", "bb", "cc", "dd", "ss", "ff", "gg"],
    },
    yAxis: {
        // y軸的顏色
        axisLine: {
            lineStyle: {
                color: "#467FE0",
            },
        },
        axisTick: {
            show: false, //不显示刻度
        },
        axisLabel: {
            show: true, //不显示坐标轴上的文字
            color: "#467FE0",
            fontSize: 10,
        },
        axisLine: {
            show: false, //不显示坐标轴线
        },
        splitLine: {
            show: true,
            lineStyle: {
                width: "0.4",
                height: "0.4",
                type: "dashed",
                color: "#467FE0",
            },
        },
    },
   ...