♥ 举个栗子,假设需要将网页中的某张图片该换为echarts图表
♥ 首先,要在 echarts官方网站下载图例
💙✨ Apache ECharts官网链接
💙✨任意选择图例下载
💙✨检查源代码
💙✨找到以echarts.min.js结尾的代码
💙✨打开链接将新网页保存至js文件夹下,保存形式为echarts.min.js
💙✨下载图例保存至HTML同级位置
💙✨将下载的图例代码中的路径更改为下图 js/echarts.min.js ps:注释行可以删去
♥ <head>标签下引用保存在 js 站点下的 echarts.min.js 文件
<script src="js/echarts.min.js"></script>
♥ 在要更改的部分插入此代码
<div id="container" style="height: 600px"></div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
♥ 大公告成!
♥小结:
(1)注意将检查中打开的 echarts.min.js 的网页保存在js文件夹下。
(2)echarts的图可能会难加载出来,此法适用于简单线型图的插入。
(3)在查找需要改动位置时,小tip是在代码中查找原图片名称,便于快速确定位置。
(4)插入的图表可以根据需要调整大小,改变尺寸。