vue3+echarts实现柱状图自动轮播

 背景:实现柱状图自动滚动效果

效果图

 

绘制图表

const chartARef = ref();
const drawScenicAreaDataAnalysis = () => {
  if (
    myChart.value != null &&
    myChart.value != "" &&
    myChart.value != undefined
  ) {
    myChart.value.dispose(); //销毁
  }
  myChart.value = echarts.init(chartARef.value);
  // 绘制图表
  myChart.value.setOption({
    grid: {
      left: "0",
      top: "10",
      right: "6%",
      bottom: "15",
      containLabel: false, //gid区域是否包含坐标轴的刻度标签。为true的时候,
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      //直角坐标系grid中的x轴,
      //一般情况下单个grid组件最多只能放上下两个x轴,
      //多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
      type: "value", //坐标轴类型,分别有:
      //'value'-数值轴;'category

你可能感兴趣的:(echarts,vue.js,javascript)