vue echart detailed instructions for use

Detailed steps for using vue ECharts:

1. Install ECharts:
   Before using ECharts in a Vue project, you need to install the ECharts library first. You can use npm or yarn to install ECharts dependencies:

   npm install echarts --save
   

   or

   yarn add echarts
   

2. Import the ECharts library:
   In the Vue component, you need to import the ECharts library and create an ECharts instance to draw charts. The ECharts library can be imported into components that need to use ECharts:

   import echarts from 'echarts';
   

3. Create a chart container:
   In the Vue template, you need to create a container element for displaying the chart. You can add a div element with a unique ID to the template as a container for the chart:

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

4. Initialize the ECharts instance: In the life cycle hook
   of the Vue component , you can initialize the ECharts instance and specify the chart container and configuration items:mounted

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

5. Configure chart options:
   In optionsthe object, you can configure the chart type, data, style, etc.
   Partial option table:
   The following is a detailed description of commonly used chart options, with sample code:

6. title：

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

2. tooltip：

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

3. legend：

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

4. xAxisand yAxis:

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

5. series：

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

6. grid：

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

7. toolbox：

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

8. dataZoom：

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

9. visualMap：

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

6. Update chart data:
   If you need to dynamically update chart data in the Vue component, you can use chart.setOption(options)methods to update the chart's configuration items.

Examples of bar and line charts, pie charts

The following is sample code for bar charts, line charts, and pie charts. You can use them in your Vue project as needed:

1. Bar chart example:

<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>

2. Line chart example:

<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>

3. Pie chart example:

<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>