如何在WordPress中插入制作好的ECharts图表

前言

插入图表可以使用图片，但是过于死板，因此使用ECharts图表，大数据彰显魅力。可以使用插件，也可以使用代码～本文讲述的使用代码～
最终呈现效果：

操作

1.生成echarts.js文件

方式一：可以通过自己生成，放入到网站根目录。

2.文章中引入echarts.js文件

切换文本模式，复制以下代码，即可引入成功。可通过开发者工具，是否引入成功。

<script src="/echarts.min.js"></script>

3.创建图表大小

切换文本模式，复制以下代码，即可创建成功。

<div id="main" style="width: 800px;height: 400px;"></div>

4.引入js数据

切换文本模式，复制以下代码，即可引入成功。
var option = 内容自行百度图说生成。

<script type="text/javascript">
       var myChart = echarts.init(document.getElementById("main"));
       var option = {
    title: {
        text: "AARRR漏斗",
        x: "center"
    },
    tooltip: {
        trigger: "item"
    },
    legend: {
        orient: "vertical",
        x: "left",
        y: "bottom",
        data: ["激发活跃Activation", "提高留存Retention", "增加收入Revenue", "传播推荐Refer", "获取用户Acquisition"]
    },
    toolbox: {
        show: true,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: true
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    series: [
        {
            name: "访问来源",
            type: "funnel",
            x: "15%",
            x2: "15%",
            y2: "10%",
            max: 100,
            itemStyle: {
                normal: {
                    labelLine: {
                        show: false
                    }
                },
                emphasis: {
                    labelLine: {
                        show: false
                    }
                }
            },
            data: [
                {
                    value: 80,
                    name: "激发活跃Activation"
                },
                {
                    value: 60,
                    name: "提高留存Retention"
                },
                {
                    value: 40,
                    name: "增加收入Revenue"
                },
                {
                    value: 20,
                    name: "传播推荐Refer"
                },
                {
                    value: 100,
                    name: "获取用户Acquisition"
                }
            ]
        }
    ]
}
    myChart.setOption(option);
</script>