2021-07-02 学习试用echarts

使用步骤
1.安装
npm install echarts
2.导入
在需要试用echarts的组件里导入
var myEchart=require("echarts")
3.使用
3.1定义useEcharts方法
在methods里面定义一个叫useEcharts的方法

3.2初始化echarts对象

//init 初始化echart
var myChart=myEchart.init(document.getElementById("test"))

注：init为在export default之前导入的echarts组件的方法

3.3定义一个有宽度高度的div命名为test

<div id="test" style="height:600px;width:600px;"></div>

3.4设置option图表对象属性

//option 设置图表对象属性
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data:this.res,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }   
                }]
            };

3.5设置图表内容

 //setOption 设置图表内容
myChart.setOption(option)

注：此处设置表图内容是给初始化的myChart对象设置的

3.6在mouted里面调用useEcharts方法

mounted(){
        this.useEcharts()
    },

4.实现效果