记录 vue 中使用echarts

最新推荐文章于 2022-09-03 17:08:07 发布

疯狂输出的小鲨鱼

最新推荐文章于 2022-09-03 17:08:07 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/Evan_Ada/article/details/107465899

版权

echarts 官网

创建echarts 组件（方便后续使用的啦）

<template>
  <div class="Echarts">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: "Echarts",
  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "近一周商品发布",
        //   padding: [50, 100]             标题的位置
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["销量"]
        },
        // 控制echarts 的位置属性
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.myEcharts();
  }
};
</script>

<style>
</style>

实际页面直接引用就可以了

接下来我们配置项和数据显示图表（var option）

title{

title. show = true ：(boolean) 是否显示标题组件。
title. text = ’ '：(string)主标题文本，支持使用 \n 换行。
title. link = ‘’：主标题文本超链接
title. target = ‘blank’：指定窗口打开主标题超链接。
- ‘self’ 当前窗口打开
- ‘blank’ 新窗口打开
title. textStyle ：主题文本样式
- title.textStyle. color = ‘#333’
- 其中包括{ color , fontStyle , fontWeight , fontFamily , fontSize , lineHeight , width , height , textBorderColor , textBorderWidth , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , rich }等
title. subtext = ‘’：副标题文本，支持使用 \n 换行。属性同主标题
title. padding = 5 ：标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

padding: 5// 设置内边距为 5
padding: [5, 10]// 设置上下的内边距为 5，左右的内边距为 10
padding: [5,10,5,10,]// 分别设置四个方向的内边距

title. itemGap = 10 ：主副标题之间的间距。
title. left = ‘auto’ ：title 组件离容器左侧的距离。
如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐
left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’
title. backgroundColor = ‘transparent’ ：标题背景色，默认透明。
title. borderColor = ‘#ccc’ ：标题的边框颜色。支持的颜色格式同 backgroundColor。
title. borderWidth ：标题的边框线宽。
title. borderRadius ：圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。如:

borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）

title. shadowColor ：阴影颜色。支持的格式同color。

}

legend{ 图例组件。

legend. type ：图例的类型。可选值：
‘plain’：普通图例。缺省就是普通图例。
‘scroll’：可滚动翻页的图例。当图例数量较多时可以使用。
legend. left/ top right bottom = ‘auto’/‘left’, ‘center’, ‘right’ : 图例组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’
-legend. width/height= ‘auto’/number ：图例组件的宽度/高度。默认自适应。
legend. orient = ‘horizontal’/‘vertical’ ：图例列表的布局朝向。左右 /上下
legend. align = ‘auto’/‘left’ /‘right’ ：图例标记和文本的对齐。默认自动
legend. padding = 5 ：图例内边距，使用示例：

padding: 5     // 设置内边距为 5
padding: [5, 10]   // 设置上下的内边距为 5，左右的内边距为 10
padding: [ 5,10, 5,10, ]     // 分别设置四个方向的内边距

legend. itemGap = 10 ：图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
legend. itemWidth = 25 ：图例标记的图形宽度。
legend. itemHeight = 14 ：图例标记的图形高度。
legend. selectedMode = true ：图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
legend. inactiveColor = ‘#ccc’ ：图例关闭时的颜色。
legend. textStyle ：图例的公用文本样式。
所有属性
{ color , fontStyle , fontWeight , fontFamily , fontSize , lineHeight , backgroundColor , borderColor , borderWidth , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , rich }
legend. icon ：图例项的 icon。
其中含有的数值有：‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’ 或者图片
legend. backgroundColor = ‘transparent’ ：图例背景色，默认透明。
legend. borderColor = ‘#ccc’ ：图例的边框颜色。支持的颜色格式同 backgroundColor。
legend. borderWidth = 1 ：图例的边框线宽。
legend. borderRadius ：圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。如:

borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）

}

grid {直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。

grid. left/ top/right/bottom = ‘10%’ : grid 组件离容器左/上/右/下侧的距离。
grid. width/height = ‘auto’ ：grid 组件的宽/高度
grid. backgroundColor = ‘transparent’ ：网格背景色，默认透明。
grid. tooltip ：提示框组件（鼠标放到数据上显示的详情提示框）

}

xAxis { grid 中的 x 轴

xAxis. show = true ：是否显示 x 轴。
xAxis. type = ‘category’ ：坐标轴类型。可选：
—‘value’ 数值轴，适用于连续数据。
—‘category’ 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
—‘time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
‘log’ 对数轴。适用于对数数据。
xAxis. position ：‘top’/‘bottom’ x 轴的位置上/下。
xAxis. offset ：number ：X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
xAxis. name ：坐标轴名称。
xAxis. nameTextStyleObject ：坐标轴名称的文字样式。
所有属性
{ color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , rich }
xAxis. axisLabel :坐标轴刻度标签的相关设置。
所有属性
{ show , interval , inside , rotate , margin , formatter , showMinLabel , showMaxLabel , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , rich }
xAxis. boundaryGap ：true 和 false。默认为 true ：坐标轴两边留白策略

}

tooltip{提示框组件。

tooltip. trigger = ‘item’ ：触发类型。
‘item’ “：据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
‘axis’ ：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
tooltip.axisPointer. type = ‘line’/shadow/cross 指示器类型。：直线指示器、阴影指示器、十字准星指示器
tooltip.axisPointer. axis = ‘auto’ / ‘x’/ ‘y’/ ‘radius’/ ‘angle’。：默认情况，坐标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）。

}