Echartsjs图表的使用
cdn引入
<script src="http://cdn.suoluomei.com/common/js2.0/echarts/4.2.1/dist/echarts.min.js"></script>雷达图
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据可视</title>
</head>
<style>
#chart {
width: 100%;
height: 300px;
}
</style>
<body>
<div class="box">
<div id="chart"></div>
</div>
</body>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="http://cdn.suoluomei.com/common/js2.0/echarts/4.2.1/dist/echarts.min.js"></script>
<script>
new Vue({
el: '.box',
data: {
},
mounted() {
this.getChart()
},
methods: {
getChart() {
var myChart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '肌肤'
},
tooltip: {},
radar: {
name: {
textStyle: {
color: 'black',
backgroundColor: 'white',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: '代谢', max: 100 },
{ name: '油脂', max: 100 },
{ name: '毛孔', max: 100 },
{ name: '敏感', max: 100 },
{ name: '皱纹', max: 100 },
{ name: '色素', max: 100 }
]
},
series: [{
name: '肌肤',
type: 'radar',
areaStyle: { normal: {} },
itemStyle: {
normal: {
color: "#B0D8BC" //显示点颜色与填充颜色
}
},
label: {
color: "#000",
show: true,
},
data: [
{ name: "分数", value: [50, 60, 70, 80, 90, 100] }
]
}]
};
myChart.setOption(option);
},
}
})
</script>
</html>地图
在这里插入图片描述
去github获取china.js文件直达地址
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据可视化地图</title>
</head>
<style>
html {
background: #04052B;
}
#main,
#line {
width: 1200px;
height: 600px;
margin: auto;
}
</style>
<body>
<div class="box">
<div id="main"></div>
</div>
</body>
<script src="http://cdn.suoluomei.com/common/js2.0/echarts/4.2.1/dist/echarts.min.js"></script>
<script src="./china.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script>
new Vue({
el: '.box',
data: {
},
mounted() {
setInterval(() => {
this.getRandom()
}, 2000)
},
methods: {
getRandom() {
var cityData = [{ name: '北京', value: this.getData() }, { name: '天津', value: this.getData() },
{ name: '上海', value: this.getData() }, { name: '重庆', value: this.getData() },
{ name: '河北', value: this.getData() }, { name: '河南', value: this.getData() },
{ name: '云南', value: this.getData() }, { name: '辽宁', value: this.getData() },
{ name: '黑龙江', value: this.getData() }, { name: '湖南', value: this.getData() },
{ name: '安徽', value: this.getData() }, { name: '山东', value: this.getData() },
{ name: '新疆', value: this.getData() }, { name: '江苏', value: this.getData() },
{ name: '浙江', value: this.getData() }, { name: '江西', value: this.getData() },
{ name: '湖北', value: this.getData() }, { name: '广西', value: this.getData() },
{ name: '甘肃', value: this.getData() }, { name: '山西', value: this.getData() },
{ name: '内蒙古', value: this.getData() }, { name: '陕西', value: this.getData() },
{ name: '吉林', value: this.getData() }, { name: '福建', value: this.getData() },
{ name: '贵州', value: this.getData() }, { name: '广东', value: this.getData() },
{ name: '青海', value: this.getData() }, { name: '西藏', value: this.getData() },
{ name: '四川', value: this.getData() }, { name: '宁夏', value: this.getData() },
{ name: '海南', value: this.getData() }, { name: '中国台湾', value: this.getData() },
{ name: '中国香港', value: this.getData() }, { name: '中国澳门', value: this.getData() }]
this.getMapChart(cityData)
},
getData() {
return Math.ceil(Math.random() * 1000);
},
getMapChart(cityData) {
var chart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: '#04052B',
tooltip: {
textStyle: {
color: '#fff'
}
},
visualMap: [{
type: "piecewise",
pieces: [
{ gt: 1000 },
{ gt: 750, lte: 1000 },
{ gt: 500, lte: 750 },
{ gt: 250, lte: 500 },
{ gte: 0, lte: 250, },
],
textStyle: {
color: '#fff'
},
inRange: {
color: ["#5475f5", "#9feaa5", "#85daef", "#74e2ca", "#e6ac53"],
},
}],
series: [{
name: '额度',
type: 'map',
map: 'china',
roam: false,//禁止鼠标滚动缩放
zoom: 1.2,
label: {
normal: {
show: true,//显示地区名称
formatter: "{b}\n{c}",
color: '#000',
},
},
itemStyle: {
borderColor: "#fff",//设置各区域轮廓颜色
},
emphasis: { //高亮样式
label: {
color: '#000',
},
itemStyle: {
areaColor: '#f5f5f5'
},
show: true
},
data: cityData
}]
};
chart.setOption(option);
},
}
})
</script>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-09-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录