echarts功能点使用

resize

容器大小改变，图表随之改变，始终保持100%的图表宽度

<div id="main" style="width:100%;height:400px"></div>

<style>
  var myChart = echarts.init(document.getElementById('main'));
  window.addEventListener('resize',function(){
    myChart.resize()
  })
</style>

设置特定的图表大小

 myChart.resize({
     width:300,
     height:300
 })

dispose

切换tab项时切换不同的图表时，需要对通过dispose将echart实例清除，然后在进行init初始化绘制

<template>
  <el-tabs class="demo-tabs" type="card" @tab-change="handleChanage" v-model="activeName">
    <el-tab-pane label="柱状图" name="first"></el-tab-pane>
    <el-tab-pane label="折线图" name="second"></el-tab-pane>
  </el-tabs>
  <div id="main"></div>
</template>

function handleChanage(name) {
  console.log(name)
  if (name === 'first') {
    myChart.dispose()
    firstDraw()
  } else {
    myChart.dispose()
    secondDraw()
  }
}

let myChart = null
const activeName = ref('first')
function firstDraw() {
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
}
function secondDraw() {
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  myChart.setOption({
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150],
        type: 'line'
      }
    ]
  });
}

主题

在官网下载主题文件(主题编辑器 - Apache ECharts)，引入样式，初始化选择样式进行渲染

• 主题保存为 JSON 文件，则需要自行加载和注册

//通过浏览器的network请求中查看是否请求成功，查看路径是否正确
 fetch('src/utils/wonderland.json')  
  .then(r => r.json())
  .then(theme => {
   window.echarts.registerTheme('wonderland', theme);
   myChart = window.echarts.init(document.getElementById('main'), "wonderland");
  })

• 主题保存为 UMD 格式的 JS 文件，文件内部已经做了自注册，通过script标签引入 JS 即可

<script src="wonderland.js"></script>

 myChart = window.echarts.init(document.getElementById('main'), "wonderland");