echarts在vue里使用

文章目录

• echarts在vue中的使用
• • 前置提及：vue中节点的获取
  • 安装echarts，没安装的话安装一下
  • 使用的三个步骤：
  • 关于重新绘制：
  • 配置项说明
  • 代码部分：
  • • 引入echarts
    • 完整案例

echarts在vue中的使用

前置提及：vue中节点的获取

<div id="box">box</div>
<div ref="ref">ref</div>

1. 通过原生获取
   let box = document.getElementById('box')

2. 通过refs获取（反射吧reflect）

   let ref = this.$refs.ref

两种都是返回dom

安装echarts，没安装的话安装一下

npm install echarts

使用的三个步骤：

1. 引入echarts

2. 定义外部容器,必须给宽高

3. 定义options配置对象，放入数据

4. 初始化echarts,加载配置

关于重新绘制：

如果需要修改数据或者配置，只需要再次调用setOption()方法，传入配置即可，不需要再次init()初始化

配置项说明

代码部分：

/*
	绘制一个柱状图，渲染数据。
	点击按钮是修改数据值
*/

引入echarts

// echarts 5 版本需要把全部的引入进来
import * as echarts from 'echarts'

完整案例

<template>
    <div>
        <div id="echartsdemo" ref="container"></div>
        <el-button size="mini" @click="changeData">改变数据</el-button>
    </div>
</template>

<script>
import * as ec from 'echarts'
export default {
    name:"ec",
    data(){
        return {
            echartsinstance:null,
            options:{
                // 标题设置
                title:{text:'标图标题'},
                tooltip:{},//提示框
                legend:{// 数据标识
                    data:["人数"]
                },
                // x轴标记
                xAxis:{
                    data:["vue","react","au",'jq']
                },
                // y轴标记
                yAxis:{},
                // 数据系列
                series:[
                    {
                        name:'人数',
                        type:'bar',
                        data:[200,300,100,200]
                    }
                ]
            }
        }
    },
    methods:{
      changeData(){
          this.options = {
                // 标题设置
                title:{text:'标图标题'},
                tooltip:{},//提示框
                legend:{// 数据标识
                    data:["人数"]
                },
                // x轴标记
                xAxis:{
                    data:["vue","react","au",'jq']
                },
                // y轴标记
                yAxis:{},
                // 数据系列
                series:[
                    {
                        name:'人数',
                        type:'bar',
                        data:[500,100,200,400]
                    }
                ]
          }
      }
    },
    mounted(){
        this.echartsinstance = ec.init(this.$refs.container)
        this.echartsinstance.setOption(this.options)
    },
    watch:{
        options(){
            this.echartsinstance.setOption(this.options)

        }
    }
}
</script>
<style scoped lang="less">
#echartsdemo{
    width:600px;
    height: 400px;
}
</style>