前言
插入图表可以使用图片,但是过于死板,因此使用ECharts图表,大数据彰显魅力。可以使用插件,也可以使用代码~本文讲述的使用代码~
最终呈现效果:
操作
1.生成echarts.js文件
方式一:可以通过自己生成,放入到网站根目录。
https://www.echartsjs.com/zh/builder.html
方式二:直接引用百度的即可。
2.文章中引入echarts.js文件
切换文本模式,复制以下代码,即可引入成功。可通过开发者工具,是否引入成功。
<script src="/echarts.min.js"></script>
3.创建图表大小
切换文本模式,复制以下代码,即可创建成功。
<div id="main" style="width: 800px;height: 400px;"></div>
4.引入js数据
切换文本模式,复制以下代码,即可引入成功。
var option = 内容自行百度图说生成。
百度图说传送门https://tushuo.baidu.com/
<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>