大廠是怎麼進行SQL調優的？
阿新 • • 發佈：2020-11-16
1:首先要用到echarts
2：在vue中安裝這個依賴
3：引入要用的頁面
import echarts from 'echarts';
4：然後初始化
<template> <a-col span="12" style="min-height:343px;width:100%;background:#fff" ref="getwidth" :style="'display:'+ model"> <div class="layui-col-md6 tjgx-panel" > <div class="layui-card"> <div class="layui-card-header panel-title"> <span class="left-text" >統計更新及時率</span> <a class="close-link right-text" @click="onHide"> <a-icon type="close" style="color: #b0b0b0;" /> </a> <div class="right-text" style="color: #b0b0b0;"> <span v-for="(item,index) in activeList" :key="index" :class="item.is_active?'acitive':''" @click.stop="Onactive(item,index)" class="week " ref="alist">{{item.name}}</span> <!-- <span class="month">本月</span> <span class="year">本年</span> --> </div> </div> <div class="layui-card-body common-height"> <echartsModal :Maxwidths ="widths" :MinHeight="MHeight" :echartsColor="xAxis.color" :legendWAndH="legendWAndH" :xAxisData="xAxis.data" :seriesData="xAxis.x.data" :SerNameValue="xAxis.SerNameValue" :echartsName="xAxis.name" /> <!-- <div class="tjgx-con" id="container" style="min-height:280px;" :style="'width:'+widths+'px'" ></div> --> </div> </div> </div> </a-col> </template> <script> import echartsModal from '../../viewModal/Echarts' // import echarts from 'echarts'; export default { components:{ echartsModal }, data(){ return{ model:'block', widths:'', legendWAndH:[15,15,18], MHeight:'', xAxis:{ data: ['廣州', '深圳', '珠海', '汕頭', '佛山', '韶關', '湛江', '肇慶', '江門', '茂名', '惠州', '梅州', '汕尾', '河源', '陽江', '清遠', '東莞', '中山', '潮州', '揭陽', '雲浮'], x:{ data: [7.9, 2, 6, 5, 7, 5, 7, 80, 6, 7, 6, 86, 6, 56, 7, 6, 8, 5, 4, 7, 8], // data: [87.9, 58, 67, 56, 72, 54, 74, 59, 64, 75, 68, 47, 63, 89, 78, 64, 82, 56, 40, 73, 80], }, name:'及時率', //圖表名稱 SerNameValue:{ position:'top', color:'#3398DB', // }, // color:'' //圖表顏色 color:'#3398DB' //圖表顏色 }, activeList:[ { name:'本週', is_active:true, }, { name:'本月', is_active:false, }, { name:'本年', is_active:false, }, ] } }, mounted(){ this.widths = String((this.$refs.getwidth.$el.clientWidth) - 30) ; //畫布寬度 this.MHeight =String((this.$refs.getwidth.$el.clientHeight) - 68) //畫布高度 }, methods:{ onHide(){ const _this = this; _this.model = 'none'; _this.$emit('isHide', _this.model,0) }, Onactive(val,index){ const _this = this let Alist = _this.activeList let Length = _this.$refs.alist.length let axis = _this.xAxis let sumber = 0; let arr = []; for( let t = 0; t < Length; t++ ){ Alist[t].is_active = false; } if( val.name == '本週' ){ sumber = 1 }else if ( val.name =='本月' ){ sumber = 1 }else if( val.name == '本年' ){ sumber = 1 } Alist[index].is_active = true; axis.x.data.map(item=>{ item += sumber arr.push(item) }) axis.x.data = arr _this.xAxis = axis _this.activeList = Alist } } } </script> <style scoped> /* .week{ padding: 0 1%; } */ .layui-card-header { position: relative; height: 42px; line-height: 42px; padding: 0 15px; border-bottom: 1px solid #f6f6f6; color: #333; border-radius: 2px 2px 0 0; font-size: 14px; } .common-height { height: 280px; } .layui-card { margin-bottom: 15px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); } .layui-card-body { position: relative; padding: 10px 15px; line-height: 24px; } .layui-col-md20 { width: 20%; } .time-city-panel { display: flex !important; justify-content: space-between; align-items: center; } .time-city-panel img { width: 73px !important; height: 61px !important; padding: 0 10px 10px !important; } .time-city-panel .one-row, .time-city-panel .two-row { padding: 0 10px; } .time-city-panel .one-row p:first-of-type { font-size: 18px; font-weight: bold; padding: 0 0 10px; text-align: left; } .time-city-panel .two-row p:first-of-type { padding: 0 0 10px; color: #96acbc; font-weight: bold; line-height: 22px; } .db_img { width: 20px; height: 22px; margin: 0 5px; vertical-align: middle; } .panel-title .left-text { padding-left: 10px; border-left: 8px solid #239fe6; font-size: 20px; display: inline-block; height: 30px; line-height: 30px; vertical-align: middle; } .panel-title .right-text { float: right; color: #239fe6; font-size: 14px; margin-left: 15px; } /*筒高度*/ .common-height { height: 280px; } .text-overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tjgx-panel .right-text span, .ajtj-panel .right-text span { display: inline-block; color: #b0b0b0; } .tjgx-panel .right-text span.acitive, .ajtj-panel .right-text span.acitive { color: #239fe6; } #chart, #ajtjChart { width: 100%; height: 90%; } </style>
4 ：Echarts 元件
<template>
<div>
<!-- style="min-height:280px;" -->
<div id="Echarts" :style="'width:'+Maxwidths+'px;min-height:'+MinHeight+'px'" ></div>
<!-- <div id="Echarts" v-if="Isgrid == false" :style="'width:'+Maxwidths+'px;height:'+MinHeight+'px'" ></div> -->
</div>
</template>
<script>
import echarts from 'echarts';
import { number } from 'echarts/lib/export';
export default {
props:{
Isgrid:{
type:Boolean,
default:()=> true //預設顯示柱狀圖
},
ss:{
type:Object,
default:()=>{}
},
Maxwidths:{
type:String, //整個容器的寬度
default:''
},
MinHeight:{
type:String, //最小高度
default:''
},
echartsColor:{ //影象的顏色
type:String,
default:''
},
legendWAndH:{ //圖例的寬高位置等
type:Array,
default:()=>[15,15,18]
},
legendColor:{
type:String,
default:()=>'' //圖例的顏色，如果不加則預設是圖形顏色
},
xAxisData:{ //圖形X軸的資料
type:Array,
default:()=>[]
},
YAxisName:{ //圖形y軸的名稱設定 陣列或者百分比
type:Object,
default:()=>{}
// default:{name:'111',formatter: '{value}%'}
},
seriesData:{
type:Array, // 顯示影象的資料 佔據的多少
default:()=>[]
},
SerNameValue:{ //圖形資料分析的佔據的位置 left right top bottom 和顯示的顏色
type:Object,
default:()=>{}
// default:{position:top,color: '#3398DB',formatter: '{c}%'}
},
echartsName:{ //圖形的名稱
type:String,
default:()=>'柱狀圖'
},
XorYatter:{
type:Array,
default:()=>['{value}%','{c}%'] //預設為百分比
},
//雷達圖的引數
gWidth:{ //寬度預設為百分百
type:String,
default:()=>'100'
},
gHeight:{
type:String,
default:()=> '90' //高度預設為90
},
gridValue:{ /// 雷達圖的名稱等等 格式[{text:11}]
type:Array,
default:()=>[]
},
gridraius:{ //圓圈大小
type:Number,
default:()=> 80 //預設為80
},
gridTextStyle:{ //名稱的預設顏色 text
type:String,
default:()=>'#6bbcef'
},
symbolSize:{ // 圓點的大小
type:Number,
default:()=> 10
},
SerValue:{
type:Array,
default:()=>[] //網格里面對應的數值
},
serVcolor:{
type:String,
default:()=> '#1bbdf8' //數值的預設顏色 SerValue的
},
lineStyleColor:{
type:String,
default:()=> '#1cbdf8' //連線線的顏色
},
itemStyleColor:{
type:String,
default:()=> '#1cbdf8' //連線圓點的預設顏色
},
BgColor:{
type:String,
default:()=> 'rgba(189, 230, 249, 0.5)'
}
},
data(){
return{
option:{
color:[], //圖例顏色
legend:{
data:[], //圖例名稱
itemWidth:0, //圖例的寬度
itemHeight:0, //圖例的高度
right:0,
textStyle:{
color:''
}
},
xAxis:{
data:[] //x軸資料
},
yAxis:{
name:'', //名稱
axisLabel:{
formatter:'' //是否顯示百分比
}
},
series:[
{
name:'',
type:'bar', //型別
data:[], //X軸顯示的資料
label:{
normal:{
show:true,
position:'',
color:'',
formatter:''
}
}
}
]
},
options:{
radar:[
{
indicator:[], // 顯示的名稱的欄位只能是text ps:[{text:'aaa'}]
radius:0, //園角
name:{
textStyle:{
color:'' //顏色
}
},
symbolSize:0, //圓點大小
}
],
series:[
{
type:'radar',
data:[{
value:[], //對應的資料
label:{
normal:{
show:true,
color:'', //選中的時候顏色
formatter:(params)=>{
return params.value;
}
}
},
//連線線顏色
lineStyle:{
color:'',
},
// 連線圓點顏色
itemStyle:{
color:''
},
// 圖表背景網格的顏色
areaStyle:{
normal:{
opacity:0.9,
color:''
}
}
}]
}
]
}
}
},
created(){
const _this = this;
console.log(_this.Isgrid)
console.log(this.ECharts)
if( _this.Isgrid ){
_this.onloads() //初始化資料
}else{
_this.isInitGrid()
}
},
mounted(){
const _this = this;
if(_this.ss){
_this.option = {}
_this.option = _this.ss;
}
setTimeout(()=>{
_this.$nextTick(()=>{
let Echarts = echarts.init(document.getElementById('Echarts'))
Echarts.setOption(_this.option,true)
})
},500)
},
watch:{
seriesData(val){
this.seriesData = val
this.onloads(true)
}
},
methods:{
onloads(is){
const _this = this;
let op = _this.option
op.color = [_this.echartsColor]
op.legend.data = [_this.echartsName]
op.legend.itemWidth =_this.legendWAndH[0]
op.legend.itemHeight =_this.legendWAndH[1]
op.legend.right =_this.legendWAndH[2]
op.legend.textStyle.color =_this.legendColor == '' ? _this.echartsColor:''
op.xAxis.data = _this.xAxisData
op.yAxis.name = _this.echartsName
op.yAxis.axisLabel.formatter = _this.XorYatter[0]
op.series[0].data = _this.seriesData
op.series[0].name = _this.echartsName
op.series[0].label.normal.position = _this.SerNameValue.position
op.series[0].label.normal.formatter = _this.XorYatter[1]
op.series[0].label.normal.color = _this.SerNameValue.color == '' ? _this.echartsColor:_this.SerNameValue.color
_this.option = op;
if( is ){
_this.$nextTick(()=>{
let Echarts = echarts.init(document.getElementById('Echarts'))
Echarts.setOption(op,true)
})
}
},
isInitGrid(){
const _this = this;
let g = _this.options;
g.radar[0].indicator = _this.gridValue
g.radar[0].radius = _this.gridraius
g.radar[0].name.textStyle.color = _this.gridTextStyle
g.radar[0].symbolSize = _this.symbolSize
g.series[0].data[0].value = _this.SerValue
g.series[0].data[0].label.normal.color = _this.serVcolor
g.series[0].data[0].lineStyle.color = _this.lineStyleColor
g.series[0].data[0].itemStyle.color = _this.itemStyleColor
g.series[0].data[0].areaStyle.normal.color = _this.BgColor
}
}
}
</script>
5：效果圖
6：有需要的可以拿去玩玩，雷達柱狀圖都可以做