echarts入门学习

作者: 似朝朝我心 | 来源:发表于2022-01-19 16:16 被阅读0次

案例demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./JS/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="./JS/echarts.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div id="main" style="width: 400px;height: 400px;">
                
            </div>
        </div>
        <script type="text/javascript">
            const app = new Vue({
                el:"#app",
                data(){
                    return {
                        option:{
                                title: {
                                  text: 'ECharts 入门示例'
                                },
                                tooltip: {},
                                legend: {
                                  data: ['销量']
                                },
                                xAxis: {
                                  data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                                },
                                yAxis: {},
                                series: [
                                  {
                                    name: '销量',
                                    type: 'bar',
                                    data: [5, 20, 36, 10, 10, 20]
                                  }
                                ]
                             }
                    }
                },
                mounted() {
                    const myChart = echarts.init(document.getElementById('main'))
                    myChart.setOption(this.option)
                }
            })
        </script>
    </body>
</html>