Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

vue3项目中如何搭建Echarts图表

//1、安装ECharts
npm install echarts --save

//2、导入ECharts
import * as echarts from 'echarts'

//3、创建图表容器
mounted() {
  // 初始化图表
  let chart = echarts.init(this.$refs.chartContainer)
  // 设置图表配置项
  let option = {
    // ...
  }
  // 设置图表配置项并刷新图表
  chart.setOption(option)
}

//4、设置图表配置项
mounted() {
  // 初始化图表
  let chart = echarts.init(this.$refs.chartContainer)
  // 设置图表配置项
  let option = {
    title: {
      text: '柱状图示例'
    },
    tooltip: {},
    xAxis: {
      data: []
    },
    yAxis: {},
    series: [{
      name: '访问量',
      type: 'bar',
      data: []
    }]
  }
  // 设置图表配置项并刷新图表
  chart.setOption(option)
}

//5、销毁图表
beforeDestroy() {
  // 销毁图表
  let chart = this.$refs.chartContainer.querySelector('div.echarts')
  chart && chart.dispose()
}
点击展开全文

相关文章

  1. 百度Echarts设置geo地图位置(上下左右)
  2. 北京西城区什刹海街道地图
  3. 百度Echarts饼图大小设置(附代码)
  4. 百度echarts实现堆叠分离柱形图
  5. 百度echarts折线图效果图(渐变色)