Echarts学习笔记2（初体验及配置项柱状图）

目录

1.echarts获取

2.HelloWord

配置项：

title（设置图表的标题）：

配置项--tooltip(数据提示信息):

配置项--legend(图例-图表数据的小提示):

柱状图的基本配置:

柱状图效果实现( 柱状图标记效果 ):

柱状图效果实现2--xAxis，yAxis

---

1.echarts获取

前期准备

电脑上面安装node

node下载地址：Node.js 中文网

淘宝镜像（选按）

淘宝 NPM 镜像站自 2014 年 正式对外服务。于npm命令在国内下载速度很慢。所以淘宝每隔10分钟就会把npm服务器的内容拉取一次放在国内服务器 这样一来我们在下载依赖的时候 速度会快很多

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装

1.初始化 npm init -y

2.安装echarts依赖

npm install --save echarts

2.HelloWord

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="main"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    // echarts仅有一个方法init，执行init时传入一个具备大小
    // （如果没有指定容器的大小将会按照0大小来处理即无法看到图表）的dom节点后即可实例化出图表对象，图表库实现为多实例的，
    // 同一页面可多次init出多个图表。
    var myChart = echarts.init(document.getElementById("main")); // 绘制图表 // setOption方法设置图表实例的配置项 以及数据 所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。
    myChart.setOption({
      title: {
        //echarts标题
        text: "ECharts 入门示例",
      }, //tooltip:提示框组件，用于配置鼠标滑过或点击图表时的显示框。
      tooltip: {},
      // 不过我们在使用Echarts过程中经常会遇到如下问题：图例经常不知道如何调节到我们想要的位置。
      legend: {}, //横坐标 xAxis配置 直角坐标系x轴
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {}, //系列（series）
      // 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图
      // charts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>
<style>
  #main{
    width: 500px;
    height: 500px;
  }

</style>

配置项：

title（设置图表的标题）：

 title: { // 常用的配置 ↓（详细请参照官方文档）
         show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
         text: "1主标题", //主标题文本，'\n'指定换行
         link:'https://www.baidu.com', //主标题文本超链接,默认值true 
         target: "self", //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口） 
         subtext: '副标题', //副标题文本，'\n'指定换行 
         sublink: '', //副标题文本超链接 
         subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口） 
         x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） 
         y: 'bottom', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px） 
         backgroundColor: 'red', //标题背景颜色，默认'rgba(0,0,0,0)'透明 
         borderWidth: 5, //标题边框线宽，单位px，默认为0（无边框） 
         borderColor: '#ccffee', //标题边框颜色,默认'#ccc' 
         padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距 
         itemGap: 10, //主副标题纵向间隔，单位px，默认为10 
         textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} 
             fontFamily: 'Arial, Verdana, sans...', 
             fontSize: 12, 
             fontStyle: 'normal', 
             fontWeight: 'normal', // }, 
             subtextStyle: {//副标题文本样式{"color": "#aaa"} 
             fontFamily: 'Arial, Verdana, sans...', 
             fontSize: 12, 
             fontStyle: 'normal', 
            fontWeight: 'normal', 
           },
          subtextStyle: {
             color: "#a1b2c3", // 副标题文字的颜色。
             fontStyle: "normal", // 副标题文字字体的风格。 'normal'  'italic'  'oblique'
             fontWeight: "bold", // 副标题文字字体的粗细。 'normal' 'bold'  'bolder'  'lighter' 500|600。
             fontSize: 18, // 字体大小
             lineHeight: "130", // 行高
             textBorderColor: "red", // 文字本身的描边颜色。
             textBorderWidth: 5, // 文字本身的描边宽度。
             textShadowColor: "transparent", // 文字本身的阴影颜色。
             textShadowBlur: 0, // 文字本身的阴影长度。
             textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
             textShadowOffsetY: 0, //  文字本身的阴影 Y 偏移。
           },
      },

配置项--tooltip(数据提示信息):

            常用的配置项↓
tooltip: {//提示框组件，用于配置鼠标滑过或点击图表时的显示框。
        show: true, // 是否显示
        trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
        axisPointer: { // 坐标轴指示器配置项。
            type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
          },
        // showContent: true, //是否显示提示框浮层，默认显示。
        // triggerOn: 'mouseover', // 触发时机'click'鼠标点击时触发。 
        backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
        borderColor: '#333', // 提示框浮层的边框颜色。
        borderWidth: 0, // 提示框浮层的边框宽。
        padding: 5, // 提示框浮层内边距，
        textStyle: { // 提示框浮层的文本样式。
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 14,
        },
        // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
        // 模板变量有 {a}, {b}，{c}，分别表示系列名，数据名，数据值等
        // formatter: '{a}--{b} 的成绩是 {c}'
        formatter: function(arg) {
            return arg[0].name + '的分数是:' + arg[0].data
        }
      },

配置项--legend(图例-图表数据的小提示):

legend: {
        show: true, //是否显示
        icon: "circle",//图例样式
        top: "55%", // 组件离容器的距离
        bottom:"20%", // 组件离容器的距离
        left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'
        right: "5%", 
        left:"10%" // // 组件离容器的距离
        padding: 5, // 图例内边距
        itemWidth: 6, // 图例标记的图形宽度。
        itemGap: 20, // 图例每项之间的间隔。
        itemHeight: 14, // 图例标记的图形高度。
        selectedMode: false, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
        inactiveColor: "#fffddd", // 图例关闭时的颜色。
        textStyle: {//图例的公用文本样式。
          color: "#aabbcc", // 文字的颜色。
          fontStyle: "normal", // 文字字体的风格。'italic'
          fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
          fontFamily: "sans-serif", // 文字的字体系列。
          fontSize: 12, // 文字的字体大小。
          lineHeight: 20, // 行高。
          backgroundColor: "transparent", // 文字块背景色。
          borderColor: "transparent", // 文字块边框颜色。
          borderWidth: 0, // 文字块边框宽度。
          borderRadius: 0, // 文字块的圆角。
          padding: 0, // 文字块的内边距
          hadowColor: "transparent", // 文字块的背景阴影颜色
          shadowBlur: 0, // 文字块的背景阴影长度。
          shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
          shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
          width: 50, // 文字块的宽度。 默认
          height: 40, // 文字块的高度 默认
          textBorderColor: "transparent", // 文字本身的描边颜色。
          textBorderWidth: 0, // 文字本身的描边宽度。
          textShadowColor: "transparent", // 文字本身的阴影颜色。
          textShadowBlur: 0, // 文字本身的阴影长度。
          textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
          textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
        }
      },

柱状图的基本配置:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- 2.echarts根结点根容器如果我们没有去指定当前容器的大小 echarts会按照0来进行处理 -->
    <div id="myecharts" ref="demoh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.demoh);
    let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; //x轴数据
    let yData = [88, 75, 20, 210, 35]; //y轴数据
    let option = {
      xAxis: {
        //配置x轴坐标参数
        data: xData,
        type: "category", //坐标轴类型。'value' 数值轴，适用于连续数据。
        // 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
        // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
        // 'log' 对数轴。适用于对数数据。
      },
      yAxis: {
        //配置y轴坐标参数
        type: "value", //同x轴的参数
      },
      series: [
        //系列 配置图表的类型
        {
          type: "bar",
          name: "销量", //系列名称，用于提示框组件的显示，
          data: yData,
        },
      ],
    };
    // 绘制图表 setOption 配置图表的配置项
    myChart.setOption(option);
  },
};
</script>
<style scoped>
#myecharts {
  width: 600px;
  height: 600px;
  border: 2px solid red;
}
</style>

柱状图效果实现( 柱状图标记效果 ):

最大值最小值平均值 通过markPoint进行设置

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="myecharts" ref="demoh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.demoh);
    let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; //x轴数据
    let yData = [88, 75, 20, 210, 35]; //y轴数据
    let option = {
      xAxis: {
        //配置x轴坐标参数
        data: xData,
        type: "category", //坐标轴类型。'value' 数值轴，适用于连续数据。
        // 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
        // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
        // 'log' 对数轴。适用于对数数据。
      },
      yAxis: {
        //配置y轴坐标参数
        type: "value", //同x轴的参数
      },
      series: [
        //系列 配置图表的类型
        {
          type: "bar",
          name: "销量", //系列名称，用于提示框组件的显示，
          data: yData,
          ///最大值最小值//
          markPoint: {
            //图表标注。
            data: [
              //标注的数据数组。每个数组项是一个对象
              {
                type: "max", //直接用 type 属性标注系列中的最大值，最小值。
                name: "最大值",
              },
              {
                type: "min",
                name: "最小值",
              },
            ],
          },
          ///最大值最小值//
          ///平均值//
          markLine: {
            //图表标线
            data: [
              //标线的数据数组。
              {
                type: "average",
                name: "平均值",
              },
            ],
          },
          ///平均值//
        },
      ],
    };
    // 绘制图表 setOption 配置图表的配置项
    myChart.setOption(option);
  },
};
</script>
<style scoped>
#myecharts {
  width: 600px;
  height: 600px;
  border: 2px solid red;
}
</style>

柱状图效果实现2--xAxis，yAxis

水平柱状图

通过设置xAxis yAxis中的type属性值来进行设置

barWidth : xx,设置柱图宽度

设置单独柱子的颜色

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="myecharts" ref="demoh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.demoh);
    let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; //x轴数据
    let yData = [88, 75, 20, 210, 35]; //y轴数据
    let option = {
      xAxis: {
        type: "value", //数值轴
        //坐标轴类型。'value' 数值轴，适用于连续数据。
        // 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
        // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
        // 'log' 对数轴。适用于对数数据。
      },
      yAxis: {
        data: xData,
        type: "category", //设置y为类目轴
      },
      series: [
        {
          type: "bar",
          name: "销量",
          data: yData,
          barWidth: 50, //设置宽度
          // color:"red",//设置颜色
          // 单独设置每个柱子的颜色
          itemStyle: {
            normal: {
              //每根柱子颜色设置
              color: function (params) {
                let colorList = [
                  "#c23531",
                  "#2f4554",
                  "#61a0a8",
                  "#d48265",
                  "#91c7ae",
                ];
                return colorList[params.dataIndex];
              },
            },
          },
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值",
              },
              {
                type: "min",
                name: "最小值",
              },
            ],
          },

          markLine: {
            data: [
              {
                type: "average",
                name: "平均值",
              },
            ],
          },
        },
      ],
    };
    // 绘制图表 setOption 配置图表的配置项
    myChart.setOption(option);
  },
};
</script>
<style scoped>
#myecharts {
  width: 600px;
  height: 600px;
  border: 2px solid red;
}
</style>