vue导入echarts并使用

m0_56224392

已于 2023-05-20 18:14:11 修改

阅读量55

点赞数

文章标签： echarts vue.js javascript

于 2023-03-28 08:06:19 首次发布

本文链接：https://blog.csdn.net/m0_56224392/article/details/129808054

版权

本文展示了如何在Vue.js应用中安装Echarts并创建柱状图。通过`npminstallecharts--save`引入库，然后初始化图表，设置标题、图例、X轴、Y轴和系列数据。此外，还讨论了如何调整工具箱选项以控制图表显示功能。

摘要由CSDN通过智能技术生成

npm install echarts --save

import * as echarts from "echarts"

给定一个容器

<div ref="carInfo1" id="carInfo1"></div>

拿到容器

 this.domCar1=this.$refs.carInfo1

初始化echart

this.carChart1=echarts.init(this.domCar1)

再设置样式

this.carChart1.setOption({
      title:{
        x:'center',
        text:'一周流入车辆统计',
        textStyle:{
          color:'#024f9b',
          opacity:0.6,
        }
      },
      legend:{
        orient:'horizontal',
        x:'center',
        y:25
      },
      xAxis:{
        data:['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis:{

      },
      series:[
        {
          name:'蓝色车牌',
          type:'bar',
          data:[40,42,22,28,32,18,20]
        },
        {
          name:'绿色车牌',
          type:'bar',
          data:[21,23,15,12,18,15,16]
        },
        {
          name:'黄色车牌',
          type:'bar',
          data:[25,21,15,12,23,8,11]
        },
      ]
    })

title，legend，series一般所有类型都有，此为柱状图，有x轴和y轴

在series的type中修改为其他样式即可

更多样式请网上查询

若要隐藏右上角按钮：

//部分按钮  
toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
//部分按钮
toolbox: {
    show: false,
}