Using echarts in vue

Vue does not operate on DOM elements, but how to use [jQuery] or JavaScript-based plug-ins?
Recently I watched a video to briefly understand

First introduce two declaration period functions:

After the created
instance is created, data and methods are initialized. Commonly used to initiate [Ajax] requests to obtain data, especially when the returned data is related to binding events

mounted
to complete the [mount] . It is used to obtain DOM elements in el and perform DOM operations; if the returned data operations depend on DOM completion, it is recommended to send data requests at this time

So for DOM-based jQuery and JavaScript plugins, it can be called in the mounted function

Let’s use ECharts in vue (ECharts is an open-source visualization library implemented in JavaScript, covering charts in various industries and meeting various needs) to render a histogram in order to
use it. Unfamiliar
official website: Portal

<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

<div id="app">
    <echarts></echarts>
</div>

<script type="text/javascript">
    Vue.component('echarts', {
        template: {{EJS0}},
        data() {
            return {}
        },
        mounted() {
            // Based on the prepared dom, initialize the echarts instance 
            var myChart = echarts.init( document .getElementById( 'main' ));

            // Specify the configuration items and data of the chart 
            var option = {
                 title : {
                     text : 'The first ECharts instance'
                },
                tooltip : {},
                 legend : {
                     data : [ 'Sales' ]
                },
                xAxis : {
                     data : [ "shirt" , "cardigan" , "chiffon shirt" , "pants" , "high heels" , "socks" ]
                },
                yAxis : {},
                 series : [{
                     name : 'Sales' ,
                     type : 'bar' ,
                     data : [ 5 , 20 , 36 , 10 , 10 , 20 ]
                }]
            };

            // Display the chart using the configuration items and data just specified.
            myChart.setOption(option);
        }
    })

    new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>
</body>

Generally used in a separate vue file, it can also be written in HTML

renderings

Leave a Comment

Your email address will not be published. Required fields are marked *