如何在vue中使用echarts

最新推荐文章于 2026-04-04 01:05:10 发布

原创最新推荐文章于 2026-04-04 01:05:10 发布 · 1.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何在Vue项目中使用ECharts进行数据可视化。通过具体示例详细讲解了安装配置过程及图表定制技巧，包括调整柱状图样式、间距等。

由于在项目中需要对数据进行可视化处理，也就是用图表展示，以下是我使用的一些心得体会~

我的示例是在vue-cli搭建

安装echarts依赖
npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

创建图表
首先需要全局引入
在main.js中

// 引入echarts
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts

首先我们来看一个例子：

在模板中创建一个有宽高的容器
在这里插入图片描述
在script中的代码如下

axisLine 和axisTick 是去掉X轴和Y轴的刻度线的

barWidth:'30px’是设置柱状图的宽度的，
barGap:1,设置柱状图之前的间隔，但是好像没有什么用
barCateGoryGap:20,设置柱状图之前的间隔，但是好像没有什么用

如要改变柱状图之间的间距，改变最外层的容器的宽度可以实现类似的效果

showBackground: true,柱状图的背景色是否显示，true为显示
backgroundStyle: 设置柱状图的背景色在这里插入图片描述
itemStyle:{ normal:{ color:‘rgba(57, 53, 53, 1)’ } }设置柱状图自身的颜色

如果要设置title的话，可以在title里面设置如下属性，需要注意的是padding好像只能设置一个值。两个值的话好像没有效果
title: {
text: ‘百度一下’,//主标题
link: ‘http://www.baidu.com’,//主标题超链接
target: ‘blank’,//副标题的超链接打开方式
subtext: “中国\n杭州”, //副标题 \n 用于换行
sublink: ‘http://www.baidu.com’,//副标题超链接
subtarget: ‘blank’,//副标题超链接打开方式
itemGap: 5,//主副标题间距
left: ‘center’,//主副标题的水平位置
top: ‘center’,//主副标题的垂直位置
padding: 20,//标题内边距,
backgroundColor: ‘#ccc’,//背景颜色；
borderColor: ‘#000’,//边框的颜色
borderWidth: 5,//标签线框
borderRadius: 10,//边框切圆角
shadowBlur: 10,//图形阴影模糊大小.
shadowColor: ‘aqua’,//阴影颜色
shadowOffsetX: ‘60’,//阴影水平方向上的偏移距离
shadowOffsetY: ‘70’,//阴影垂直方向上的偏移距离
// textAlign: ‘auto’,//整体（包括 text 和 subtext）的水平对齐
// textVerticalAlign: ‘auto’,//整体（包括 text 和 subtext）的垂直对齐。

    textStyle: {//主标题的属性
      color: '#C28D21',//颜色
      fontSize: 40,//大小
      fontStyle: 'oblique',//斜体
      fontWeight: '700',//粗细
      fontFamily: 'monospace',//字体
      // textBorderColor: "#000",//描边
      // textBorderWidth: '2',//描边的宽度
      textShadowColor: 'red',//阴影颜色
      textShadowBlur: '10',//阴影的宽度
      textShadowOffsetX: '-0',//阴影向X偏移
      textShadowOffsetY: '-70',//阴影向Y偏移
    },
    subtextStyle: {//副标题的属性
      color: '#25664A',
      // 同主标题
    },

我这里的话是把title注释掉了

上述例子效果如下：
在这里插入图片描述