方教程:http://pyecharts.herokuapp.com/
pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。用 Echarts 生成的图可视化效果非常棒,为了与 Python 进行对接,方便在 Python 中直接使用数据生成图。
from pyecharts import Chart,configure #导入所需绘图函数
configure(output_image=True) #可以将图表保存为svg/jpeg/png/pdf/gif
chart = Chart('主标题','副标题') #Chart是我们绘图函数
attr = ['x1','x2','x3','x4'] #attr是属性,也就是常见的X轴标签
v = [y1,y2,y3,y4] #v是各个属性对应的值,也就是常见的Y值
chart.use_theme() #设置图表主题
chart.add('图标',attr,v1) #add画图图层,添加我们所需的参数
chart.render(path = '***.jpeg') #图表输出,path是输出路径
render会默认将图表输出为html格式,可在浏览器打开。但是想要插入到ppt当中,清晰度会下降,因此需要将其转化为其他格式,如svg/jpeg/png/pdf/gif 等等。要实现格式的转换,需要安装:
代码
站地图作为根据网站的结构,框架,内容生成的导航网页文件。
大多数人都知道网站地图对于提高用户体验有好处:它们为网站访问者指明方向,并帮助迷失的访问者找到他们想看的页面。
那么什么是网站地图呢?
在开始介绍网站地图的制作与提交之前,我们有必要先了解一下什么是网站地图。
网站地图也就是sitemap,是一个网站所有链接的容器。很多网站的链接层次比较深,蜘蛛是很难抓取到的,网站地图可以方便搜索引擎蜘蛛抓取网站页面,通过抓取网站页面,可以清晰的了解网站的架构。网站地图一般存放在根目录下并命名为sitemap,为搜索引擎蜘蛛引路,增加网站重要内容页面的收录。
网站地图的作用:
1.为搜索引擎蜘蛛提供可以浏览整个网站的链接,简单的体现出网站的整体框架。
2.为搜索引擎蜘蛛提供一些链接,指向动态页面或者采用其他方法比较难以到达的页面。
3.作为一种潜在的着陆页,可以对搜索流量进行优化。
4.如果访问者试图访问网站所在域内并不存在的URL,那么这个访问者就会被转到“无法找到文件”的错误页面,而网站地图可以作为该页面的“准”内容。
HTML版本的网站地图
html版本的网站地图就是用户可以在网站上看到的,列出网站上所有主要页面的链接的页面。对于小型网站来说,甚至可以列出整个网站的所有的页面。而对于具有一定规模的网站来说,一个网站地图不可能罗列所有的页面链接,可以采用两种方法解决:
第一种就是网站地图只列出网站最主要的链接,如一级分类,二级分类。
第二种方法是将网站地图分成几个文件,主网站地图列出通往那次级网站的链接,刺激网站地图在列出一部分页面链接。
XML本的网站地图
XML版本的网站地图是由goole首先提出的,怎么区分呢?上面所说的HTML版本中的sitemap首字母s是小字写的,XML版本中的S则是大写的。XML版本的网站地图是由XML标签组成的,文件本身必须UTF-8编码,网站地图文件实际上就是列出网站需要被收录的页面的URL。最简单的网站地图可以是一个纯文本文件,文件只要列出页面的URL,一行一个URL,搜索引擎就能抓取并理解文件内容。
网站地图的制作方法
网上有很多网站地图的生成方法,比如说在线生成,软件生成等。这里小编推荐使用小爬虫网站地图生成工具:http://www.sitemap-xml.org。使用方法如下:
1)输入域名,选择网站对应的编码,点击“生成”按钮(建议使用搜狗浏览器或者google浏览器)如图所示:
2)等待小爬虫爬行网站,爬行时间根据网站内容多少和服务器访问速度不定,如果数据较多,则建议晚上10点以后操作,
3)下载sitemap.xml或者sitemap.html文件,上传到网站根目录,在首页做链接,如图所示:
需要说明一下sitemap.xml和sitemap.html文件的区别:
sitemap.xml文件的创建是为了更有利于搜索引擎的抓取,从而提高工作效率,生成sitemap.xml文件后将其链接放入robort.txt文件内。提示:
良好的robort.txt协议可以指引搜索引擎抓取方向,节省蜘蛛抓取时间,所以无形中提升了蜘蛛的工作效率,也就增大了页面被抓取的可能性。
将sitemap.xml和robort.txt文件放在网站的根目录下。
sitemap.html格式的网站地图主要是用来方便用户的浏览,并不能起到XMLSitemap所起的作用。所以最好两者都要有。
4)登录百度站长平台,点击“链接提交”,填写sitemap.xml对应的URL地址,如图所示:
提交完后,百度搜索引擎蜘蛛会对我们的网站进行抓取。大量案例证明,添加网站能加速网站内容收录速度,提升网站收录率。但是这要建立在网站内容质量符合搜索引擎标准的基础上,如果网站内容质量太差,则使用网站地图也是无济于事的。以上就是制作提交网站地图的一些分享,也是基础中的基础,希望对新手有用。
文章选自《SEO全网优化指南》
来源:卢松松博客,欢迎分享
话不多说,看图!
本篇文章介绍 Vue3 + vite +TS 项目内使用 Echarts 5 绘制中国地图,标记分布点!之前没有接触过 Echarts 的,可以先去官方示例看看,里面图形特别齐全。但是官方文档看着费劲的,太多了根本记不住,所以自己做个总结,下次就可以直接使用了,不用做重复无用功。
Echarts 已更新到了 5.0 版本,安装完记得检查下自己的版本是否是 5.0 。
npm install echarts --save
安装完成之后,在 package.json 中检查是否安装成功?
可以下载中国以及各个省份地图数据。免费的文件下载地址:
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
记得收藏哦!免得浪费加班时间。
引入 echarts 可以全局引入:
import * as echarts from "echarts"
/* 之前vue2 */
Vue.prototype.$ecahrt = echarts
/* vue3 */
app.config.globalProperties.$echarts = echarts
也可以直接在绘制页面内按需引用。
引入需要绘制的地图数据 json 或 js 文件,本文使用的是 json 格式:
import chinaJSON from '../../assets/json/china.json'
注意:引入的时候先引入 echarts ,后引入 chinaJSON 文件,顺序不能反哦!
template 部分代码:
<template>
<div>
<div
ref="chinaMap"
style="height: 700px;border: solid 1px red;width: 100%;background: #010111;"
>
地图1
</div>
</div>
</template>
script 部分代码:
<script lang="ts" setup>
import * as echarts from 'echarts'
import chinaJSON from '../../assets/json/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
onMounted(() => {
drawChina()
})
let regions = [
{
name: '新疆维吾尔自治区',
itemStyle: {
areaColor: '#374ba4',
opacity: 1,
},
},
{
name: '四川省',
itemStyle: {
areaColor: '#fe9b45',
opacity: 1,
},
},
{
name: '陕西省',
itemStyle: {
areaColor: '#fd691b',
opacity: 1,
},
},
{
name: '黑龙江省',
itemStyle: {
areaColor: '#ffc556',
opacity: 1,
},
},
]
let scatter = [
{ name: '北京烤鸭', value: [116.46122, 39.97886, 9] },
{ name: '兰州拉面', value: [103.86615, 36.040129, 9] },
{ name: '新疆烤肉', value: [87.613228, 43.810394, 9] },
{ name: '长沙臭豆腐', value: [112.915204, 28.207735, 9] },
{ name: '西安肉夹馍', value: [108.953445, 34.288842, 9] },
{ name: '云南', value: [102.710002, 25.045806, 9] },
]
function drawChina() {
var myChart = echarts.init(chinaMap.value)
echarts.registerMap('china', chinaJSON) //注册可用的地图
var option = {
geo: {
map: 'china',
roam: true, //是否允许缩放,拖拽
zoom: 1, //初始化大小
//缩放大小限制
scaleLimit: {
min: 1, //最小
max: 2, //最大
},
//设置中心点
center: [115.97, 29.71],
//省份地图添加背景
regions: regions,
itemStyle: {
areaColor: '#0b122e',
color: 'red',
borderColor: '#232652',
borderWidth: 2,
},
//高亮状态
emphasis: {
itemStyle: {
areaColor: '#1af9e5',
color: '#fff',
},
},
},
//配置属性
series: {
type: 'effectScatter',
coordinateSystem: 'geo',
data: scatter,
showEffectOn: 'render',
rippleEffect: {
//涟漪特效相关配置
brushType: 'stroke', //波纹的绘制方式,可选 'stroke' 和 'fill'
},
hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
label: {
//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,
normal: {
formatter: '{b}',
position: 'right',
show: true,
},
},
itemStyle: {
//图形样式,normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
normal: {
color: '#ffffff', //散点的颜色
shadowBlur: 10,
shadowColor: 20,
fontSize: '12px',
},
},
zlevel: 1,
},
}
myChart.setOption(option)
}
</script>
想看更多的可以去官方文档:
https://echarts.apache.org/zh/option.html#geo.regions.emphasis.itemStyle
*请认真填写需求信息,我们会在24小时内与您取得联系。