可视化Echarts初体验

在项目中获取Echarts安装

npm install --save echarts

 

使用Echarts

         在自己的页面中引用echarts

import * as echarts from "echarts"

        echarts容器默认宽高为0如果我们不进行设置的话页面将不会显示

 <div ref="myc" id="demo_div"></div> //设置dom节点

<style>
    #demo_div{
        width: 500px;
        height: 500px;
        border: 1px solid red;
    }
</style>

        整体代码：

<template>
  <div ref="myc" id="demo_div"></div>
</template>

<script>
//引用echarts
import * as echarts from "echarts"
export default {
    mounted(){
        let mc = echarts.init(this.$refs.myc) //定义变量储存echarts初始化的内容
        //设置相关参数
        mc.setOption({ //传入对象型数据
            title:{ //设置echarts的标题
                text:"HelloWord"
            },
            xAxis:{//设置x坐标轴
                //使用data数组传入数据
                data:["x1","x2","x3","x4"]
            },
            yAxis:{//设置y坐标轴

            },
            series:{ //设置系列 主要作用就是设置当前所能映射出的图形
                name:"数据展示",
                type:"bar", //bar参数代表柱状图
                //设置条形数据
                data:[100,120,80,90]
            }
        })
    }
}
</script>

<style>
    #demo_div{
        width: 500px;
        height: 500px;
        border: 1px solid red;
    }
</style>

        运行查看效果