一、ECharts的基本使用
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
主要有以下特点:
-
丰富的可视化类型
-
多种数据格式无需转换直接使用
-
千万数据的前端展现
-
移动端优化
-
多渲染方案,跨平台使用!
-
深度的交互式数据探索
-
多维数据的支持以及丰富的视觉编码手段
-
动态数据
-
绚丽的特效
-
通过 GL 实现更多更强大绚丽的三维可视化
(一)、下载
npm install echarts --save
(二)、引入插件
main.js中写入以下代码
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
(三)、创建节点
在你要开发的页面进行
<template>
<div>
<div id="chart"></div>
</div>
</template>
<style scoped>
#chartOne {
width: 400px;
height: 300px;
}
</style>
(四)、初始化实例
export default {
data() {
return {
echart: "",
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
this.echart = this.$echarts.init(document.getElementById("chart")); // 基于准备好的 dom,初始化 echarts 实例
},
}
}
(五)、准备配置项
loadMap(data, name, myChart) {
// 获取对应的json地图数据,然后向echarts注册该区域的地图,最后加载地图信息
this.$echarts.registerMap(name, data);
var option = {
tooltip: {
show: true,
formatter: function(params) {
if (params.data) {
return params.data.parkName;
} else {
return params.name;
}
},
},
geo: {
map: name,
zoom: 1.2,
label: {
normal: {
show: name == "china" ? false : true,
color: "#fff",
},
emphasis: {
show: true,
color: "#fff",
},
},
roam: true,
itemStyle: {
normal: {
borderColor: "#b9b4b7",
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#073684", // 0% 处的颜色
},
{
offset: 1,
color: "#061E3D", // 100% 处的颜色
},
],
},
},
emphasis: {
areaColor: "#7295fd",
},
},
},
series: [
{
name: "供需占比",
type: "effectScatter",
coordinateSystem: "geo",
symbol: "circle",
symbolSize: function(data) {
return 5;
},
rippleEffect: {
color: "#C5CCFF",
number: 3,
period: 2,
scale: 3,
brushType: "fill",
},
symbolSize: 10,
data: geoCoordMap,
itemStyle: {
color: "red", // 修改为你想要的颜色值
shadowBlur: 10,
shadowColor: "red",
},
emphasis: {
itemStyle: {
color: "red", // 修改为你想要的颜色值
},
},
},
{
name: "MAP",
type: "map",
mapType: name,
geoIndex: 0,
data: allData,
selectedMode: "false", //是否允许选中多个区域
label: {
normal: {
show: false,
formatter: function(val) {
val.value = val.value ? val.value : 100;
var area_content =
"{a|" + val.name + "}" + "-" + "{b|" + val.value + "}";
return area_content.split("-").join("\n");
}, //让series 中的文字进行换行
rich: {
a: {
color: "#fff",
},
b: {
color: "#fff",
fontFamily: "Microsoft YaHei",
fontSize: 14,
width: 16,
height: 16,
borderRadius: 10,
borderWidth: 1,
borderColor: "#f00",
textAlign: "center",
padding: 2,
},
}, //富文本样式,就是上面的formatter中'{a|'和'{b|'
},
emphasis: {
show: false,
},
}, //地图中文字内容及样式控制
},
],
};
},
(六)、绘制图表
myChart.setOption(option, true);
(七)、完整代码
<template>
<div>
<div id="chart" style="width: 100%; height: 100%;"></div>
</div>
</template>
<script>
import china from "@/assets/get/china.json";
import sichuan from "@/assets/get/sichuan/sichuan.json";
// 成都
import chengdu from "@/assets/get/sichuan/chengdu/chengdu.json";
import dujiangyan from "@/assets/get/sichuan/chengdu/dujiangyanshi.json";
/**
* ......
* 根据自己项目下载json文件并配置
* 这个步骤可以从后端获取,
*/
var provinces = {
四川: sichuan,
// 成都
成都市: chengdu,
};
// 各省份的数据
var allData = [
{
parkName: "北京",
},
{
parkName: "四川",
},
];
// 需要展示的点
var geoCoordMap = [];
export default {
data() {
return {
echart: "",
};
},
mounted() {
this.initChart();
this.getData();
window.addEventListener("resize", () => {
this.echart.resize();
});
},
watch: {
"$store.state.hidden_aside"() {
setTimeout(() => {
this.echart.resize();
}, 500);
},
},
methods: {
// 获取数据
getData() {
this.$axios
.getAction("bigData/query.do?queryKey=parking_parks")
.then((res) => {
if (res.success) {
geoCoordMap = res.data.map((item) => {
return {
name: item.county,
value: [item.PRECISIONS, item.LATITUDE],
// county: item.county,
province: item.province,
city: item.city,
parkName: item.ORG_NAME,
};
});
this.initChart();
} else {
this.$message.error("parking_parks 获取数据失败");
}
});
},
//this.$echarts
initChart() {
let that = this;
this.echart = this.$echarts.init(document.getElementById("chart"));
// 加载地图
this.loadMap(china, "china", this.echart);
var timeFn = null;
//单击切换到省级地图,当mapCode有值,说明可以切换到下级地图
this.echart.on("click", function(params) {
switch (params.name) {
case "乐山市":
provinces.市中区 = LSshizhongqu;
break;
case "内江市":
provinces.市中区 = NJshizhongqu;
break;
}
clearTimeout(timeFn);
//由于单击事件和双击事件冲突,故单击的响应事件延迟250毫秒执行
timeFn = setTimeout(function() {
var name = params.name; //地区name
// var county = params.data.county
var mapCode = provinces[name]; //地区的json数据
if (!mapCode) {
alert("无此区域地图显示");
return;
}
that.loadMap(mapCode, name, that.echart);
}, 250);
});
// 绑定双击事件,返回全国地图
this.echart.on("dblclick", function(params) {
//当双击事件发生时,清除单击事件,仅响应双击事件
clearTimeout(timeFn);
//返回全国地图
that.loadMap(china, "china", that.echart);
});
},
loadMap(data, name, myChart) {
// 获取对应的json地图数据,然后向echarts注册该区域的地图,最后加载地图信息
this.$echarts.registerMap(name, data);
var option = {
tooltip: {
show: true,
formatter: function(params) {
if (params.data) {
return params.data.parkName;
} else {
return params.name;
}
},
},
geo: {
map: name,
zoom: 1.2,
label: {
normal: {
show: name == "china" ? false : true,
color: "#fff",
},
emphasis: {
show: true,
color: "#fff",
},
},
roam: true,
itemStyle: {
normal: {
borderColor: "#b9b4b7",
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#073684", // 0% 处的颜色
},
{
offset: 1,
color: "#061E3D", // 100% 处的颜色
},
],
},
},
emphasis: {
areaColor: "#7295fd",
},
},
},
series: [
{
name: "供需占比",
type: "effectScatter",
coordinateSystem: "geo",
symbol: "circle",
symbolSize: function(data) {
return 5;
},
rippleEffect: {
color: "#C5CCFF",
number: 3,
period: 2,
scale: 3,
brushType: "fill",
},
symbolSize: 10,
data: geoCoordMap,
itemStyle: {
color: "red", // 修改为你想要的颜色值
shadowBlur: 10,
shadowColor: "red",
},
emphasis: {
itemStyle: {
color: "red", // 修改为你想要的颜色值
},
},
},
{
name: "MAP",
type: "map",
mapType: name,
geoIndex: 0,
data: allData,
selectedMode: "false", //是否允许选中多个区域
label: {
normal: {
show: false,
formatter: function(val) {
val.value = val.value ? val.value : 100;
var area_content =
"{a|" + val.name + "}" + "-" + "{b|" + val.value + "}";
return area_content.split("-").join("\n");
}, //让series 中的文字进行换行
rich: {
a: {
color: "#fff",
},
b: {
color: "#fff",
fontFamily: "Microsoft YaHei",
fontSize: 14,
width: 16,
height: 16,
borderRadius: 10,
borderWidth: 1,
borderColor: "#f00",
textAlign: "center",
padding: 2,
},
}, //富文本样式,就是上面的formatter中'{a|'和'{b|'
},
emphasis: {
show: false,
},
}, //地图中文字内容及样式控制
},
],
};
myChart.setOption(option, true);
},
},
};
</script>
<style>
/* 样式 */
</style>
样式功能展示:
官方文档:Echarts 官方文档
因为是国外的网站,所以浏览起来会有些慢,在此篇文章结尾我会放几个国内镜像的还不错的图表网站。
二、DataV的基本使用
组件库基于Vue (React版 (opens new window)) ,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用:
兼容性
组件库的开发和调试都使用Chrome浏览器,没有时间和精力做其他浏览器的兼容,尤其是IE。
所以请使用Chrome浏览器。
这个插件最好用的就是可以根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。浏览器全屏后,全屏容器将充满屏幕。
(一)、下载
// npm安装
npm install @jiaminghi/data-view
// yarn安装
yarn add @jiaminghi/data-view
(二)、引入插件
在main.js中写入:
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
(三)、使用
只要全局注册后就可以直接使用里面的全屏容器、边框、装饰等组件了
例如:
<template>
<dv-full-screen-container>
<dv-border-box-11
ref="borderBox_2"
class="componList Operational"
title="设备分析"
:titleWidth="180">
<EquipmentComponent ref="equipmentref"></EquipmentComponent>
</dv-border-box-11>
// 按需添加....
<dv-border-box-12>...</dv-border-box-12>
<dv-border-box-6>...</dv-border-box-6>
</dv-full-screen-container>
</template>
推荐几个好用的图表网站:
https://www.isqqw.com/
数据可视化技术分享 - Powered by Discuz!
https://echarts.apache.org/examples/zh/index.html
......
欢迎大家补充~