vue echart的使用详细教程

npm install echarts --save

yarn add echarts

import echarts from 'echarts';

<template>
  <div id="chartContainer"></div>
</template>

mounted() {
  // 获取图表容器元素
  const chartContainer = document.getElementById('chartContainer');
  // 创建ECharts实例
  const chart = echarts.init(chartContainer);
  // 设置图表配置项
  const options = {
    // 配置项内容，例如：图表类型、数据、样式等
  };
  // 使用配置项绘制图表
  chart.setOption(options);
}

title: {
  text: '图表标题',
  subtext: '副标题'
}

tooltip: {
  trigger: 'axis', // 提示框触发条件，可选值：'axis'（坐标轴触发）, 'item'（数据项触发）
  formatter: '{b}: {c}' // 提示框的格式化函数，{b}表示类目轴的值，{c}表示数据值
}

legend: {
  data: ['系列1', '系列2'] // 图例的名称，对应series中的name属性
}

xAxis: {
  type: 'category', // 坐标轴类型，可选值：'category'（类目轴），'value'（数值轴），'time'（时间轴），'log'（对数轴）
  data: ['数据1', '数据2', '数据3'] // 类目轴的数据
},
yAxis: {
  type: 'value' // 数值轴
}

series: [{
  name: '系列1',
  type: 'bar', // 柱状图
  data: [100, 200, 300] // 数据值
}, {
  name: '系列2',
  type: 'line', // 折线图
  data: [50, 150, 250]
}]

grid: {
  left: '10%', // 网格左侧的距离
  right: '10%', // 网格右侧的距离
  top: '10%', // 网格顶部的距离
  bottom: '10%' // 网格底部的距离
}

toolbox: {
  feature: {
    saveAsImage: {}, // 保存图表为图片
    dataView: {} // 数据视图
  }
}

dataZoom: [{
  type: 'slider', // 滑动条型数据区域缩放
  start: 0, // 起始位置百分比
  end: 50 // 结束位置百分比
}]

visualMap: {
  type: 'continuous', // 连续型视觉映射
  min: 0, // 最小值
  max: 100, // 最大值
  color: ['blue', 'red'] // 映射的颜色范围
}

<template>
  <div id="barChart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
  mounted() {
    const chartContainer = document.getElementById('barChart');
    const chart = echarts.init(chartContainer);
    const options = {
      title: {
        text: '柱状图示例',
      },
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          type: 'bar',
          data: [10, 20, 30, 40, 50],
        },
      ],
    };
    chart.setOption(options);
  },
};
</script>

<template>
  <div id="lineChart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
  mounted() {
    const chartContainer = document.getElementById('lineChart');
    const chart = echarts.init(chartContainer);
    const options = {
      title: {
        text: '折线图示例',
      },
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          type: 'line',
          data: [10, 20, 30, 40, 50],
        },
      ],
    };
    chart.setOption(options);
  },
};
</script>

<template>
  <div id="pieChart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
  mounted() {
    const chartContainer = document.getElementById('pieChart');
    const chart = echarts.init(chartContainer);
    const options = {
      title: {
        text: '饼状图示例',
      },
      series: [
        {
          type: 'pie',
          data: [
            { name: 'A', value: 10 },
            { name: 'B', value: 20 },
            { name: 'C', value: 30 },
            { name: 'D', value: 40 },
            { name: 'E', value: 50 },
          ],
        },
      ],
    };
    chart.setOption(options);
  },
};
</script>