Echarts 的简单使用

官网链接：Apache ECharts

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

主要配置

 官网配置项参考文档：Documentation - Apache ECharts

 官网示例:Examples - Apache ECharts

在vue3中的使用

npm install echarts --save

组件使用

<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

子组件 

<template>
  <div>
    <div ref="basic" class="centerCenterBottom"></div>
    <div ref="basic1" class="centerCenterBottom"></div>
    <div ref="basic2" class="centerCenterBottom"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const basic = ref()
const basic1 = ref()

const basic2 = ref()
// 指定图表的配置项和数据
let option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量'],
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
let option1 = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
};
let option2 = {
  //设置图表标题
  title: {
    text: '折线图堆叠1233标题'
  },
  //设置线条的颜色，后面是个数组
  color: ['pink', 'red', 'green', 'blue', 'gray'],

  //图表的提示框组件
  tooltip: {
    //触发方式 - 坐标轴
    trigger: 'axis'
  },
  //图例组件
  legend: {
    //series有name了，这里的data可以删除掉
    // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  },
  //网格配置 grid可以控制线形图 柱状图 图标大小
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    //是否显示刻度标签
    containLabel: true
  },
  //工具箱组件，可以另存为图片等功能
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  //设置x轴的相关配置
  xAxis: {
    type: 'category',
    //线条和y轴是否有缝隙
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  //设置y轴的相关配置
  yAxis: {
    type: 'value'
  },
  //系列图表配置，决定显示那种类型的图表
  series: [
    {
      name: '邮件营销',
      type: 'line',
      //总量，后面的会堆叠前面的累加起来，删除掉就会折叠了，一般不需要
      //stack: '总量',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      //stack: '总量',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'line',
      //stack: '总量',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接访问',
      type: 'line',
      //stack: '总量',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      //stack: '总量',
      data: [520, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
function init() {
  const myChart = echarts.init(basic.value)
  const myChart1 = echarts.init(basic1.value)
  const myChart2 = echarts.init(basic2.value)

  myChart.setOption(option)
  myChart1.setOption(option1)
  myChart2.setOption(option2)

}
onMounted(
  () => {
    init()
  }
)



</script>
<style>
.centerCenterBottom {
  width: 100%;
  height: 400px;
}
</style>

效果