echarts的深入学习

安装使用请参考

<template>
  <div id="myChart1">

  </div>
</template>

<script>
import echarts from "echarts"
let echarts2 = require('echarts/lib/echarts')    // 引入基本模板
require('echarts/lib/chart/bar')               // 引入柱状图组件
require('echarts/lib/chart/line');             //引入折线图
require('echarts/lib/component/tooltip')      // 引入提示框和title组件
require('echarts/lib/component/title')
require("echarts/lib/component/legend");
export default {
  data() {
    return {
      num: '1098',   
    }
  },
  mounted() {
    this.drawLine()
    window.addEventListener('resize',this.listenResizeFn);
  },
  beforeDestroy() {
    window.removeEventListener("resize",this.listenResizeFn);
},
  methods: {
    listenResizeFn(){
      let mychart1 = echarts.init(document.getElementById('myChart1'))
      mychart1.resize();
    },
    drawLine() {
      let mychart1 = echarts.init(document.getElementById('myChart1'))
      let that = this
      mychart1.setOption({
        //  标题
        title: [
          {
            text: '产废企业',
            textStyle: {
              fontWeight: 'normal',
              fontSize: "14"
            },
          },
          {
            text: this.num,
            textStyle: {
              fontWeight: 'normal',
              fontSize: "16",
              color: '#20D99A'
            },
            left: 65
          },
        ],
        // 柱状图颜色
        // color: ['#60FC9B', '#63CEFD'],
        // 提示框相关设置
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',    //坐标轴指示器配置项
          },
           backgroundColor:'#fff',
           borderWidth:2,
           borderColor:'#E7EEEC',
           padding:[5,10],
           borderRadius: "10",
            textStyle:{
                color:'#000',
                lineHeight:25
            }
        },
        // 图例样式
        legend: {
          type: 'plain',
          orient: 'vertical',
          right: 0,
          itemWidth: 10,
          itemHeight: 10,
          selectedMode: false,  //是否可以点击图例
        },
        // X轴相关设置
        xAxis: {
          type: 'category',
          data: ['2021.09.01', '2021.09.02', '2021.09.03', '2021.09.04', '2021.09.05', '2021.09.06', '2021.09.07'],
          axisTick: {
            show: false,   //是否显示坐标轴刻度
          },
          axisLine: {
            lineStyle: {
              color: '#F0F0F0',   //坐标轴线的颜色
            }
          },
          // 刻度标签
          axisLabel: {
            show: true,
            textStyle: {
              color: "#000",
            },
          },
          // 是否显示分割线
          splitLine: {
            lineStyle: {
              color: '#F0F0F0',
              type: 'dashed'
            }
          }
        },
        // Y轴相关设置
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#F0F0F0'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#000",
            },
          },
          splitLine: {
            lineStyle: {
              color: '#F0F0F0',
              type: 'dashed'
            }
          }
        },
        // 数据
        series: [
          {
            data: [10, 250, 150, 80, 70, 110, 130],
            type: 'bar',
            name: "第一个",
            barGap: '0%',   //不同系列的柱子间间距
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, 
                  [
                    {
                      offset: 0,
                      color: '#60FC9B'
                    }, 
                    {
                      offset: 1,
                      color: '#34E8A8'
                    }
                  ]
                ),
              }
            },
          },
          {
            data: [200, 210, 70, 60, 70, 90, 30],
            type: 'bar',
            name: "第二个",
            barGap: '0%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, 
                  [
                    {
                      offset: 0,
                      color: '#63CEFD'
                    }, 
                    {
                      offset: 1,
                      color: '#7B9EFF'
                    }
                  ]
                ),
              }
            },
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
#myChart1{
    margin-top: 10px;
    width: 100%;
    height: 600px;
}
</style>

效果图：

感觉echarts中柱状图、折线图、饼图都是差不多的。

一、标题（title）

标题组件，包含主标题（text）和副标题（subtext）。

可以设置显示隐藏(show)、超链接(link)、指定窗口打开超链接(target)、位置(top、left、bottom、right)、padding等。

通过textStyle、subtextStyle来设置主标题和副标题的样式问题，包含宽、高、颜色、阴影、行高、溢出显示等问题。如果希望一个标题中有多个丰富的样式，可以使用rich(可以给标题中添加图片\分割线等)，如下：

//  rich的使用
title:{
  text:[
    '{a|这段文本采用样式a}',
    '{b|'+this.num+'}',  //变量的使用
    '{a|每年}'
  ].join(' '),  //如果需要换行则使用\n .join('\n')
  textStyle:{
    rich:{
      a:{
        fontSize: "14",
        fontWeight: 'normal',
      },
      b:{
        fontSize: "14",
        fontWeight: 'normal',
        color:'#20D99A'
      }
    }
  },
},

//  标题数组形式
title: [
  {
    text: '标题一',
    textStyle: {
      fontWeight: 'normal',
      fontSize: "14"
    },
  },
  {
    text: this.num,
    textStyle: {
      fontWeight: 'normal',
      fontSize: "16",
      color: '#20D99A'
    },
    left: 65
  },
],

 二、图例（legend）

有两种类型(type)①普通(plain)②水平/垂直滚动(scroll)

可以设置

• 显示隐藏show

• 宽、高、位置(top、left、bottom、right)

• padding

• 图例列表的布局朝向(orient)

• 对齐方式(align)

• 图例每项之间的间隔(itemGap)，横向布局时为水平间隔，纵向布局时为纵向间隔

• 图例的图形样式(itemStyle)

• 图例图形中线的样式(lineStyle)，用于诸如折线图图例横线的样式设置，可以设置type实线虚线、颜色等

• 图形旋转角度symbolRotate

• 格式化图例文本formatter

• 图例选择的模式(selectedMode)，控制是否可以通过点击图例改变系列的显示状态，默认开启

• 图例关闭时的样式

• 图例的共用文本样式textStyle，包含字体大小颜色阴影等一系列的设置

• 图例的数组数据data，如果 data没有被指定，会自动从当前系列中获取。可以设置

• 系列名称name、图例图标icon、图例项的图形样式temStyle、图例项图形中线的样式lineStyle、图形旋转角度symbolRotate、图例项的文本样式textStyle等

legend: {
  type: 'plain',
  orient: 'vertical',
  right: 0,
  itemWidth: 10,
  itemHeight: 10,
  selectedMode: false,  //是否可以点击图例
  textStyle: {
    //图例文字的样式
    color: "#000000",
    fontSize: 14,
  },
  // 图例的样式
  itemStyle:{
    color:'yellow'
  },
  // 图例线的样式
  lineStyle:{
    type:'dotted',
    color:'red'
  },
},

三、提示框tooltip

提示框组件可以设置在多种地方：

• 可以设置在全局，即 tooltip

• 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip

• 可以设置在系列中，即 series.tooltip

• 可以设置在系列的每个数据项中，即 series.data.tooltip

可以设置

• 显示隐藏show

• 触发方式trigger，值为item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；值为axis坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；值为none，不触发

• 坐标轴指示器axisPointer①可以设置类型type；②坐标轴指示器是否自动吸附到点上snap，默认自动判断；③label的字体颜色背景阴影等的设置；④lineStyle、shadowStyle、crossStyle等；⑤动画等一系列设置；

• padding

• 是否一直显示提示框、浮层隐藏的延迟，控制提示框在图表内，鼠标是否可以进入提示框、提示框位置、提示框边框的颜色等、提示框边框的背景颜色等、textStyle文本样式中字体大小颜色等的设置、extraCssText额外附加到浮层的 css 样式、提示框浮层内容格式器formatter，支持字符串模板和回调函数两种形式等

tooltip: {
  trigger: 'axis',
  formatter: function (params){
      var res=params.name+'<br/>总量：'+params.data
      return res
  },
  axisPointer: {
    type: 'line',    //坐标轴指示器配置项
    lineStyle: {
      type: "dashed",
      color: '#DFDFDF'
    }
  },
  backgroundColor: '#fff',
  borderWidth: 2,
  borderColor: '#E7EEEC',
  padding: [5, 10],
  borderRadius: "10",
  textStyle: {
    color: '#000',
    lineHeight: 25
  }
},

四、X轴xAxis

五、Y轴yAxis

六、series

七、数据区域缩放dataZoom

有三种类型(type)①内置型(inside)②滑动条型(slider)③框选型

• 可以根据filterMode选择不同的过滤方式

• 数据窗口范围的起始start、结束end百分比，值是number型的

• 数据窗口范围的起始startValue、结束数值endValue，值是number、string、date型的

• 限制窗口大小的最小值minSpan、最大值maxSpan百分比，值是number型的

• 限制窗口大小的最小值minValueSpan、最大值maxValueSpan百分比，值是number、string、date型的

• 是否锁定选择区域（或叫做数据窗口）的大小zoomLock