echarts在vue的基本使用

守得云开见繁星

已于 2024-06-05 19:19:55 修改

阅读量219

点赞数 4

文章标签： echarts vue.js 前端

于 2024-06-04 23:08:49 首次发布

本文链接：https://blog.csdn.net/m0_60477336/article/details/139418174

版权

在HTML文件中使用echarts引入

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

安装ECharts ：

npm 或 yarn 安装了 ECharts。

npm install echarts --save
yarn add echarts

正确导入 ECharts：

在你的 Vue 组件中，确保你已经正确导入了 ECharts。

import * as echarts from 'echarts';

简单使用echarts

<script>  
import * as echarts from 'echarts';  
  
export default {  
  // ...  
  mounted() {  
    this.ChartView();  
  },  
  methods: {  
    ChartView() {  
      const myChart = echarts.init(document.getElementById('main'));  
      // 设置图表的配置项和数据  
      myChart.setOption(option);  
</script>

option配置（图表中加入交互组件）

指示坐标轴当前刻度

 tooltip: {
          show : true,
          axisPointer: {
          type: 'cross'
        },
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        position: function (pos, size) {
          var obj = { top: 10 };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          return obj;
        },
        extraCssText: 'width: 170px'
        },

图表中加入交互组件--鼠标缩放

 dataZoom: [  
     {   
    // 这个dataZoom组件，默认控制x轴。
      type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      start: 10,      // 左边在 10% 的位置。
      end: 60         // 右边在 60% 的位置。
        },
     {   
     // 这个dataZoom组件，也控制x轴。
      type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
      start: 10,      // 左边在 10% 的位置。
      end: 60         // 右边在 60% 的位置。
    }，       
    {
      type: 'slider',
      show: true,
      yAxisIndex: [0],
      left: '93%',
      start: 10,
      end: 60
    },
    {
      type: 'inside',
      yAxisIndex: [0],
      start: 29,
      end: 36
    }
  ],

整体效果和代码

<script>  
import * as echarts from 'echarts';  
  
export default {  
  // ...  
  mounted() {  
    this.ChartView();  
  },  
  methods: {  
    ChartView() {  
      const myChart = echarts.init(document.getElementById('main'));  
      // 设置图表的配置项和数据  
      myChart.setOption(option);  
      option = {
        title: {
          text:'电量显示',
          left:'center',    标题居中
          textStyle: {
            fontSize:20,
            // color:'#5ccaef',
            // textShadowOffsetY: 1
          }
        },
        tooltip: {
          show : true,
          axisPointer: {
          type: 'cross'
        },
        // 
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        position: function (pos, size) {
          var obj = { top: 10 };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          return obj;
        },
        extraCssText: 'width: 170px'
        },
    xAxis: {
        data: ['1', '2', '3', '4', '5', '6','7','8','9','10'],
        show:false   // 不显示x轴
    },
    yAxis: {},
    //begin 图表中加入交互组件
    dataZoom: [  
     {   
    // 这个dataZoom组件，默认控制x轴。
      type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      start: 10,      // 左边在 10% 的位置。
      end: 60         // 右边在 60% 的位置。
        },
     {   
     // 这个dataZoom组件，也控制x轴。
      type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
      start: 10,      // 左边在 10% 的位置。
      end: 60         // 右边在 60% 的位置。
    }，       
    {
      type: 'slider',
      show: true,
      yAxisIndex: [0],
      left: '93%',
      start: 10,
      end: 60
    },
    {
      type: 'inside',
      yAxisIndex: [0],
      start: 29,
      end: 36
    }
  ],
   // end
    series: [{
        name: '电量',
        type: 'line',
        smooth:true,
        data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10]
    }]
  }
</script>