current position:Home>Vue error prone summary

Vue error prone summary

2022-04-29 18:07:11Shu Rong

Vue Error prone summary

echarts download

cnpm install [email protected] [email protected] --save

introduce

import * as echarts from 'echarts'
Vue.prototype.$echarts=echarts

Use... On the page , Make sure to put mounted In the function

<template>
    <div>
         <div id="main1" style="width: 600px;height:400px;"></div>
    </div>
</template>
<script>
export default {
    
    data() {
    
        return {
    }
    },
    mounted() {
    
    //  Based on the prepared dom, initialization echarts example 
        let myChart = this.$echarts.init(document.getElementById("main1"))
		//  Specify configuration items and data for the chart 
        myChart.setOption({
    
            title: {
    
                text: ' contact ',
            },
            tooltip: {
    },
            xAxis: {
    
                data: [' One ', ' Two ', ' 3、 ... and ', ' Four ', ' 5、 ... and ', ' 6、 ... and ']
            },
            yAxis: {
    },
            series: [{
    
                name: ' The number of ',
                type: 'bar',
                data: [45, 46, 56, 34, 47, 48]
            }]
        })
    },
}

</script>

When setting the background of the picture, use

background: url(../assets/index_background.PNG) no-repeat;
background-size:100% 100%;

background-image There is no effect

css Make good use of the layout display!!!

copyright notice
author[Shu Rong],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291631299485.html

Random recommended