[JavaScript知识库]学废了吗学废了_学废了吗学废了

<template>

? <div class="container">

? ? <div class="background_fff padding_10" style="width: 500px; height: 300px">

? ? ? <div id="Echarts" class="padding_10" style="width:100%;height:280px"></div>

? ? </div>

? </div>

</template>

<script>

const echarts = require('echarts')

export default {

? name: 'EchartsDome',

? data () {

? ? return {

? ? ? echartsData: {

? ? ? ? series: [

? ? ? ? ? '中国地区部',

? ? ? ? ? 'ICT',

? ? ? ? ? '运营商BG',

? ? ? ? ? '公司总部'

? ? ? ? ],

? ? ? ? data: [

? ? ? ? ? {

? ? ? ? ? ? series: ['2021-07', '2021-08', '2021-09', '截止当前'],

? ? ? ? ? ? data: ['10.97', '31.95', '28.11', '30.97']

? ? ? ? ? },

? ? ? ? ? {

? ? ? ? ? ? series: ['2021-07', '2021-08', '2021-09', '截止当前'],

? ? ? ? ? ? data: ['5.97', '6.95', '7.11', '8.97']

? ? ? ? ? },

? ? ? ? ? {

? ? ? ? ? ? series: ['2021-07', '2021-08', '2021-09', '截止当前'],

? ? ? ? ? ? data: ['52.97', '10.95', '50.11', '20.97']

? ? ? ? ? },

? ? ? ? ? {

? ? ? ? ? ? series: ['2021-07', '2021-08', '2021-09', '截止当前'],

? ? ? ? ? ? data: ['12.97', '32.95', '25.11', '71.97']

? ? ? ? ? }

? ? ? ? ]

? ? ? }

? ? }

? },

? mounted () {

? ? this.dealData()

? },

? methods: {

? ? dealData () {

? ? ? var Echarts = echarts.init(document.getElementById('Echarts'))

? ? ? var legendArr = this.echartsData.data.length > 0 ? this.echartsData.data[0].series : []

? ? ? var seriesArr = []

? ? ? this.echartsData.data.forEach((item, index) => {

? ? ? ? seriesArr.push(this.onInsertEcharts(legendArr[index], item.data))

? ? ? })

? ? ? // console.log(22,seriesArr)

? ? ? var option = {

? ? ? ? title: {

? ? ? ? ? text: '测试'

? ? ? ? },

? ? ? ? tooltip: {

? ? ? ? ? trigger: 'axis'

? ? ? ? },

? ? ? ? legend: {

? ? ? ? ? data: legendArr

? ? ? ? },

? ? ? ? grid: {

? ? ? ? ? left: '3%',

? ? ? ? ? right: '4%',

? ? ? ? ? bottom: '3%',

? ? ? ? ? containLabel: true

? ? ? ? },

? ? ? ? toolbox: {

? ? ? ? ? feature: {

? ? ? ? ? ? saveAsImage: {}

? ? ? ? ? }

? ? ? ? },

? ? ? ? xAxis: {

? ? ? ? ? type: 'category',

? ? ? ? ? boundaryGap: false,

? ? ? ? ? data: this.echartsData.series

? ? ? ? },

? ? ? ? yAxis: {

? ? ? ? ? type: 'value'

? ? ? ? },

? ? ? ? series: seriesArr

? ? ? }

? ? ? Echarts.clear()

? ? ? Echarts.setOption(option, true)

? ? },

? ? // 填充折线

? ? onInsertEcharts (title, list) {

? ? ? return {

? ? ? ? name: title,

? ? ? ? type: 'line',

? ? ? ? smooth: true,

? ? ? ? // stack: 'Total',

? ? ? ? data: list

? ? ? }

? ? }

? }

}

</script>

<style lang="scss" scoped>

</style>