echarts使用笔记总结2

这是我学习vue-Echarts的笔记，并不是完全品。是我，对我使用Echarts时所用到的知识进行学习，有待后面补充完善。

上一节

一、title 主标题和副标题。

（1）定义：

（2）title.text触发主标题和title.subtext触发副标题

      title: {
            text: '总流转主标题',
            subtext: '总流转副标题',
          	show:true //写了主标题或副标题的时候，默认为true。不想显示主副标题默认为false
          },

（3）标题样式和位置的修改

         title: {
            text: '总流转主标题',
            subtext: '总流转副标题',
            top: '0%', //标题位置的修改
            left: '50%',
            textStyle: {
              //主标题样式的修改
              fontSize: 17,
              color: '#ffffff',
              fontWeight: 'normal'
            },
            subtextStyle: {
              //副标题的样式修改
              fontSize: 13,
              color: '#ccc',
              fontWeight: 'normal'
            }
          },

二、legend 图例组件

（1）定义:

（2）legend.show=true触发

代码示例如下：

         legend: {
           show:true //默认为true,可以设置为false 不显示图例
          }

（3）使用

常见使用：

代码示例如下：

         legend: {
            icon: 'rect',
            align: 'right', //修改图标和文字的前后位置
            itemGap: 60, //图例每项之间的间隔
            itemWidth: 30, //图例标记的图形宽度。
            itemHeight: 20, //图例标记的图形高度。
            textStyle: {
              color: '#c3cad9',
              fontSize: 22,
              fontFamily: 'SourceHanSansCN-Regular'
            },
           }

详情：

三、 tooltip 提示框组件

（1）定义

tooltip 它实际上就是鼠标点到图表上后展示的类似数据点详情的一个说明弹窗。如下图所示

（2）使用：tooltip. trigger触发

• 在无类目轴的图表中：如散点图，饼图

  tooltip: {
            trigger: 'item'
          },

• 在有类目轴的图表中：如柱状图，折线图

  tooltip: {
            trigger: 'axis'
          },

• 默认为none什么都不触发。

（3）字符串模板格式化：

模板变量有 {a}, {b}，{c}，{d}，{e}。其在不同图表类型下代表数据含义为：

• 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
  ps：在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2}这种后面加索引的方式表示系列的索引。

• 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

• 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

• 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
  

饼图配置代码如下：

         tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },

四、xAxis（ x 轴）和 yAxis（y轴）

(1)、坐标轴留白 xAxis.boundaryGap=true、yAxis.boundaryGap=true

         xAxis: {
            type: 'category',
            boundaryGap: true, //为true时，不从圆点开始
            data: [
              '12/05',
              '12/06',
              '12/07',
              '12/08',
              '12/09',
              '12/10',
              '12/11'
            ],
          },
          yAxis: {
            type: 'value',
            boundaryGap: false, //为true时，不从圆点开始
          },

(2)、坐标轴字体样式的修改axisLabel 、y轴和x轴的样式修改splitLine、控制网格线的修改splitLine

         xAxis: {
            type: 'category',
            boundaryGap: true, //为true时，不从圆点开始
            data: [
              '12/05',
              '12/06',
              '12/07',
              '12/08',
              '12/09',
              '12/10',
              '12/11'
            ],
            // x轴的字体样式
            axisLabel: {
              show: true,
              textStyle: {
                color: '#657ca8',
                fontSize: '14',
                fontFamily: 'SourceHanSansCN - Regular'
              }
            },
            // 控制网格线是否显示
            splitLine: {
              show: true,
              //  改变轴线颜色
              lineStyle: {
                // 使用深浅的间隔色
                color: '#192c4e'
              }
            },
            // x轴的颜色和宽度
            axisLine: {
              lineStyle: {
                color: '#192c4e',
                width: 1 //这里是坐标轴的宽度,可以去掉
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#657ca8',
                fontSize: '14',
                fontFamily: 'SourceHanSansCN - Regular'
              }
            },
            // y轴的颜色和宽度
            splitLine: {
              lineStyle: {
                color: '#192c4e',
                width: 1 //这里是坐标轴的宽度
              }
            },
            // 控制网格线是否显示
            splitLine: {
              show: true,
              //  改变轴线颜色
              lineStyle: {
                // 使用深浅的间隔色
                color: '#192c4e'
              }
            }
          },

下一节