vue3+echarts实现数据化大屏
一、准备工作
1.像素适配(这里以1920*1080为例)
- 安装依赖
npm i lib-flexible postcss-px2rem -S - 在main.js中引入
import 'lib-flexible/flexible' - 在vue.config.js中添加配置项
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 192
})
]
}
}
},
}
2.echarts安装使用
- 安装依赖
npm install echarts --save - 组件内按需引入
//在需要使用的组件引入基本模板
let echarts = require("echarts/lib/echarts");
//在组件引入柱状图组件
require("echarts/lib/chart/bar");
3. 使用示例
1. 多Y轴柱状图
<template>
<div class="view-content">
<div ref="myChart" :style="{width: '100%', height: '100%'}"></div>
</div>
</template>
<script>
let echarts = require('echarts');
//在组件引入柱状图组件
require("echarts/lib/chart/bar");
export default {
name: 'bar-multipleY',
data() {
return {
bar: {
xData: [
{value: '常州', isNormal: false, color: '#f24244'},
{value: '惠州', isNormal: true, color: '#ffffff'},
{value: '阜阳', isNormal: true, color: '#ffffff'},
{value: '宿迁', isNormal: true, color: '#ffffff'}
],
yData1: [7560, 7560, 7560, 7560],
yData2: [6000, 9420, 8389, 4350],
yData3: [77, 82, 85, 93],
legendData: ['年度指标', '检测量', '合格率'],
markLine: [{name: '合格率', yAxis: 77}]
},
clickable:false,
showZoom:false,
white: '#ffffff',
red: '#f24244',
rotate:0
}
},
methods: {
drawLine() {
let _this = this
let myChart = echarts.init(this.$refs.myChart)
// 绘制图表配置
let option = {
tooltip: {
formatter: function(param) {
return '<div style=" "> '+ param.name + "<br>" + param.value + "<br>"
'</div>';
}
},
dataZoom: { //X轴滚动轴
show: this.showZoom,
realtime: true,
height: 10,
start: 0,
end: 100
},
legend: {
orient: 'horizontal', // 'vertical'
x: 'center',
y: ' top',
itemWidth: 30,
textStyle: {color: '#FFFFFF'},
data: this.bar.legendData?this.bar.legendData:[]
},
xAxis: {
show: this.showXLabel,//是否显示X轴文字
data: this.bar.xData,
axisLabel: { //坐标轴刻度标签的相关设置
interival: 0,
rotate: this.rotate,//旋转度数
color:'#ffffff',
fontSize: 12,
clickable:true
},
silent:false,
triggerEvent:true,
},
yAxis: [
{
type: 'value',
name: '(%)',
show: true,
nameTextStyle: {
color: "#00ADF9",
fontSize: 12,
},
axisLabel: {
show: this.showYLabel,
formatter: '{value}%',//y轴文字
},
axisLine: {
show: true,//是否显示Y轴
},
axisTick: { //Y轴刻度线
show: false
},
splitLine: { //隐藏Y轴背景的横线
show: false
}
},
{
type: 'value',
name: '(只)',
nameTextStyle: {
color: "#00ADF9",
fontSize: 12,
},
axisLabel: {
formatter: '{value}'
},
axisLine: {
show: true,
},
axisTick: { //Y轴刻度线
show: false
},
splitLine: { //隐藏Y轴背景的横线
show: false
}
}
],
series: [
{
type: 'bar',
yAxisIndex: 1,
name: this.bar.legendData[0],
data: this.bar.yData1,
barMaxWidth:30,
color: '#FF6136 ',
},
{
name: this.bar.legendData[1],
type: 'bar',
yAxisIndex: 1,
data: this.bar.yData2,
barMaxWidth:30,
color: '#2479DC ',
},
{
type: 'line',
name: this.bar.legendData[2],
data: this.bar.yData3,
color: '#DBCB31',
smooth: this.lineType,//折线类型 是否是平滑true还是..
}
],
};
myChart.clear(); //清空绘画内容，只会清空当前实例的内容，并不会进行销毁
// 窗口大小自适应方案
myChart.setOption(option);
setTimeout(function () {
window.onresize = function () {
myChart.resize();
}
}, 200)
myChart.on('click', 'xAxis.category', function (params) {
// 监听X轴的点击事件
if(_this.clickable){
_this.$emit('navigate',params.value)
}
});
}
}
}
</script>
<style lang="scss" scoped>
.view-content {
height: 100%;
.view-content {
padding: 10px;
}
}
</style>
2.双环图
let option = {
legend:{
textStyle: {
color: '#ffffff' //自定义文字字体颜色
},
data:['35日龄','105日龄','开产当日']
},
tooltip: {
trigger: 'item',
formatter: '{b}%'
},
series: [
{
name: '35日龄',
type: 'pie',
radius: ['30', '30%'],
labelLine: {
show: false
},
label:{
show:false
},
data: [
{
value:this.pie.data1, //需要显示的数据
name: '35日龄'+this.pie.data1+'%',
itemStyle: {
normal: {
color: '#F7D959'
}
}
},
{
value:this.pie.total-this.pie.data1,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
},
{
name: '105日龄',
type: 'pie',
radius: ['40%', '55%'],
labelLine: {
show: false
},
label:{
show:false
},
data: [
{
value:this.pie.data2, //需要显示的数据
name: '105日龄'+this.pie.data2+'%',
itemStyle: {
normal: {
color: '#0DF700'
}
}
},
{
value:this.pie.total-this.pie.data2,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
},
{
name: '开产当日',
type: 'pie',
radius: ['60%', '75%'],
labelLine: {
show: false
},
label:{
show:false
},
data: [
{
value:this.pie.data3, //需要显示的数据
name: '开产当日'+this.pie.data3+'%',
itemStyle: {
normal: {
color: '#00ADF9'
}
}
},
{
value:this.pie.total-this.pie.data3,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
}
],
color:['#F7D959',"#0DF700","#00ADF9"]
};
3. 中国地图
<template>
<div class="view-content">
<!-- echarts 初始化 -->
<div class="content" ref="mapCharts" :style="{width:'100%',height:'100%'}"></div>
</div>
</template>
<script>
import 'echarts/map/js/china.js'
import jsonp from 'jsonp'
const option = {
title: {
text: "",
},
geo: {
show: true,
map: 'china',
label: {
show: false
},
roam: false,
zoom:1,
regions: [
{
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0
}
},
label:{
show:false
}
}
],
itemStyle: {
normal: {
areaColor: '#001C54',
borderWidth: 0, //设置需要裁除的外层边框
borderColor:null,//#06C4FF
},
emphasis: {
show: false,
areaColor:null
// areaColor: '#01215c'
}
},
},
series: [{
name: '发病率',
type: 'map',
map: 'china',
geoIndex:1,
label: {
show: false,
color: '#ffffff',
fontSize: 8
},
itemStyle: {
normal:{
areaColor: 'rgba(23,68,193)',
borderColor: '#06C4FF',
borderWidth: 1
},
emphasis:{
show:false,//设置鼠标移上去样式为null
areaColor:null
}
},
roam: false,//false禁止地图缩放，移动
zoom: 1,//地图显示倍数
emphasis: {
label: {
color: '#fff',// 鼠标移上去样式
fontSize: 12,
},
itemStyle: {
areaColor: '#83b5e7'
}
},
data: []
}],
visualMap: [{
type: 'piecewise',
show: true,
pieces: [
{min: 20,max:25},
{min: 15, max: 20},
{min: 10, max: 15},
{min: 5, max: 10},
{max: 5}
],
// align: 'right'
// showLabel: false
inRange: {
symbol: 'rect',
color: [
'#ffc0b1',
'#9c0505',
]
},
textStyle:{
color: '#FFF'
},
borderColor:"#06C4FF", //边框颜色
borderWidth:1,
left:'2%',
bottom:'4%',
padding:15,
itemWidth: 20
}],
tooltip: {
trigger: 'item'
},
}
export default {
name: 'ChinaMap',
data(){
return{
list : [],
}
},
mounted() {
this.drawLine(this.list)
this.mapcharts = this.$echarts.init(this.$refs.mapCharts);
this.mapcharts.setOption(option)
},
methods: {
drawLine() {
jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427', {}, (err, data) => {
if (!err) {
// console.log(data)
let list = this.list.map(item => (
{
name: item.name,
value: item.value,
susNum: item.susNum
}))
option.series[0].data = list
this.mapcharts.setOption(option)
}
})
}
}
}
</script>
<style scoped>
.view-content {
height: 100%;
background-color: rgba(0,28,84,.3);
}
.content {
width: 100%;
height: 100%;
}
</style>
2994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
