什么是数据可视化
把数据以更直观的形式展现----图表
可以清晰有效地传达与沟通信息
可以帮助我们快速的获取隐藏在数据中的信息
ECharts的介绍
ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交换丰富，可高度个性化定制的数据可视化图表。
安装
npm install echarts --save
main.js引入 你们不用 element 就删了
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import echarts from 'echarts' //引入echarts
Vue.use(ElementUI);
new Vue({
el: '#app',
echarts,
render: h => h(App)
});vue中使用
<template>
<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
yData: [23, 24, 18, 25, 27, 28, 25], //数据
myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
};
},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
// 基本柱状图
const option = {
xAxis: {
data: this.xData
},
yAxis: {},
series: [
{
type: "bar", //形状为柱状图
data: this.yData
}
]
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
</script>
你也可以改变 option 里边的数据
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
复制代码然后运行
多个数据的时候
<template>
<!-- 实时数据图表 -->
<div class="main-container">
<el-row class="totalEchart">
<el-col :span="8" :key="index" v-for="(item, index) in tmpList" class="tmplist">
<img :src="item.path" alt="" />
<span>{{ item.title }}</span>
<el-col :span="8" v-for="(item, index) in list" :key="index"></el-col>
<div class="roseChart"></div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "",
components: {},
props: {},
data() {
return {
tmpList: [
{ id: 1, path: require("../../src/assets/logo.png"), title: "风速" },
{ id: 2, path: require("../../src/assets/logo.png"), title: "温度" },
{ id: 3, path: require("../../src/assets/logo.png"), title: "PM2.5" },
{ id: 1, path: require("../../src/assets/logo.png"), title: "风速" },
{ id: 2, path: require("../../src/assets/logo.png"), title: "温度" },
{ id: 3, path: require("../../src/assets/logo.png"), title: "PM2.5" },
// { id: 4, path: require("@/assets/images/jiance/jiance4.png"), title: "风向" },
// { id: 5, path: require("@/assets/images/jiance/jiance5.png"), title: "噪音" },
// { id: 6, path: require("@/assets/images/jiance/jiance6.png"), title: "PM10" },
],
list: [
// 假数据
{
aData: [
"1:00",
"2:00",
"3:00",
"4:00",
"5:00",
"6:00",
"7:00",
"8:00",
"9:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"24:00",
],
bData: [
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
],
color: "#307EFF",
colorLinearb:'#f0f6ff',
colorLinearc:'#ddeaff',
colorLineart:'#d6e5ff',
},
{
aData: [
"1:00",
"2:00",
"3:00",
"4:00",
"5:00",
"6:00",
"7:00",
"8:00",
"9:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"24:00",
],
bData: [
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
],
color:'#00C0E9',
colorLinearb:'#ecfafd',
colorLinearc:'#d8f5fc',
colorLineart:'#ccf2fb',
},
{
aData: [
"1:00",
"2:00",
"3:00",
"4:00",
"5:00",
"6:00",
"7:00",
"8:00",
"9:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"24:00",
],
bData: [
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
],
color:'#F3BB5C',
colorLinearb:'#fefcf7',
colorLinearc:'#fdf5e7',
colorLineart:'#fdf1de',
},
{
aData: [
"1:00",
"2:00",
"3:00",
"4:00",
"5:00",
"6:00",
"7:00",
"8:00",
"9:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"24:00",
],
bData: [
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
],
color:'#00C0E9',
colorLinearb:'#ecfafd',
colorLinearc:'#d8f5fc',
colorLineart:'#ccf2fb',
},
{
aData: [
"1:00",
"2:00",
"3:00",
"4:00",
"5:00",
"6:00",
"7:00",
"8:00",
"9:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"24:00",
],
bData: [
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
],
color:'#EE7173',
colorLinearb:'#fefafa',
colorLinearc:'#fdecec',
colorLineart:'#fce3e3',
},
{
aData: [
"1:00",
"2:00",
"3:00",
"4:00",
"5:00",
"6:00",
"7:00",
"8:00",
"9:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"24:00",
],
bData: [
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
3.5,
0,
1,
2.5,
0.5,
3.2,
3.3,
3,
3.1,
3.3,
2,
0.8,
2.9,
1.2,
],
color:'#A35CF3',
colorLinearb:'#faf7fe',
colorLinearc:'#f5ecfe',
colorLineart:'#ede0fd',
},
],
};
//
},
computed: {},
watch: {},
created() {},
mounted() {
this.drawRose();
},
methods: {
// 遍历饼图
drawRose() {
var echarts = require("echarts");
var roseCharts = document.getElementsByClassName("roseChart"); // 对应地使用ByClassName
for (var i = 0; i < roseCharts.length; i++) {
// 通过for循环，在相同class的dom内绘制元素
var myChart = echarts.init(roseCharts[i]);
myChart.setOption(
{
color: [this.list[i].color],
grid: {
top: 30,
left: 20,
right: 20,
bottom: 10,
containLabel: true,
},
tooltip: {
show: true,
trigger: "axis",
},
xAxis: {
type: "category",
//
data: this.list[i].aData,//渲染每个图标对应的数据
axisTick: {
show: false,
},
boundaryGap: false,
axisLabel: {
show: true,
color: "#858fa6", //x轴字体颜色
},
splitLine: {
lineStyle: {
width: 1,
color: "#E2E2E2",
},
},
axisLine: {
lineStyle: {
width: 1,
color: "#E2E2E2", //x轴线颜色
},
},
},
yAxis: {
type: "value",
axisTick: {
show: false,
},
axisLabel: {
color: "#858fa6",
},
splitLine: {
lineStyle: {
width: 1,
color: "#E2E2E2",
},
},
axisLine: {
lineStyle: {
width: 0,
color: "#E2E2E2",
show: false,
},
},
max: 5,
},
series: [
{
name: "数量",
type: "line",
step: "start",
// smooth: true,
symbolSize: 3,
showSymbol: false,
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: this.list[i].colorLinearb, //从下向上，下部分的颜色
},
{
offset: 0.5,
color: this.list[i].colorLinearc, //从下向上，中间部分的颜色
},
{
offset: 0,
color: this.list[i].colorLineart, //从下向上，上部分的颜色
},
],
},
},
data:this.list[i].bData,//渲染每个图标对应的数据
},
],
},
true
);
}
},
},
};
</script>
<style scoped>
.main-container {
width: 100%;
margin-top: 40px;
}
.totalEchart {
width: 100%;
}
.roseChart {
width: 530px;
height: 250px;
}
img {
width: 42px;
height: 42px;
vertical-align: middle;
}
span {
vertical-align: middle;
margin-left: 10px;
}
.tmplist {
height: 310px;
}
</style>
转载
(45条消息) 【Vue中使用Echarts】大屏可视化项目整体布局（pink老师vue 版）_vue大屏可视化_酷尔。的博客-CSDN博客
https://blog.csdn.net/apple_51931783/article/details/128312569
(44条消息) vue中引入Echarts画柱状图_vue引入echarts柱状图_Saga Two的博客-CSDN博客https://blog.csdn.net/m0_46309087/article/details/122395659
(44条消息) Vue中使用echarts实现柱状图（双柱）_vue echarts双柱状图_是日前端的博客-CSDN博客https://blog.csdn.net/focusmickey/article/details/109194031
(44条消息) Vue中使用echarts实现常用图表总结_vue是怎么实现各个图表的_是日前端的博客-CSDN博客https://blog.csdn.net/focusmickey/article/details/109193702
官网
Examples - Apache EChartshttps://echarts.apache.org/examples/zh/index.html#chart-type-line
