echarts 官方的一个 bug – sublink 跳转的问题。echarts版本号为4.8.0

开发百度地图 scatter 散点图时，副标题链接跳转出错（版本号为 4.8.0），在 GitHub 找到issues。
bug 介绍，点击副标题无法跳转到指定连接

1
2
3
4
5
6
7
8
this.options = {
  title: {
    text: "我是主标题",
    subtext: "我是副标题，我可以跳转",
    sublink: "https://www.baidu.com",
    left: "center",
  },
};

1、在 main.js 引入 echarts 和 vue-echarts，将 echarts 绑定到 Vue 原型，引入 vue-echarts 通过 vue.component()进行组件注册

将 echarts 绑定到 Vue 原型上，可以减少代码量，开发过程中需要使用 echarts 里面提供的方法，如果没有全局引入的话，需要在每个使用 echarts 的页面都需要手动引入。将 vue-echarts 使用组件注册后，提供了属性绑定的方式渲染图表就不需要通过调用 echart 的方法了。

echarts

1、echarts 的绘图流程

1
2
// 1、引入echarts js库
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
1
2
<!-- 2、DOM容器 设置宽高（注意）  -->
<div id="charts" style="width:800px;height:600px"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 3、获取渲染DOM对象
const chartDom = document.getElementById("charts");
// 4、初始化echarts对象
const chart = echarts.init(chartDom);
// 5、配置option参数  调用setOption完成渲染
chart.setOption({
  title: {
    text: "Echarts 示例",
  },
  xAxis: {
    data: ["食品", "数码", "服饰", "箱包"],
  },
  yAxis: {},
  // 系列： 包括图表的类型 包括：line bar pie等
  series: {
    type: "bar",
    data: ["100", "120", "40", "160"],
  },
});

2、dataset: 数据集

ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射

点击展示代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const chartDom = document.getElementById("chart");
const chart = echarts.init(chartDom);
const option = {
  xAxis: {
    type: "category",
  },
  yAxis: {},
  dataset: {
    source: [
      ["1季度", 80, 100, "分类1", 50],
      ["2季度", 81, 122, "分类1", 60],
      ["3季度", 76, 90, "分类1", 55],
      ["4季度", 65, 123, "分类1", 70],
    ],
  },
  // 系列
  series: [
    // 系列 0
    {
      type: "pie",
      center: ["65%", 60],
      radius: 35,
      encode: {
        itemName: 3,
        value: 4,
      },
    },
    // 系列 1
    {
      type: "line",
      encode: {
        x: 0,
        y: 2,
      },
    },
    // 系列 2
    {
      type: "bar",
      encode: {
        x: 0,
        y: 1,
      },
    },
  ],
};
chart.setOption(option);

3、基本组件

echarts 基本组件：title、坐标系的 X（xAxis）轴 Y(yAxis）轴、tooltip 提示框、toolbox 工具栏等

4、定位

1
2
3
4
5
6
7
8
9
// 大多数组件都提供了定位属性，我们可以采用类似 CSS absolute 的定位属性来控制组件的位置 left right height bottom的值可以是数值或者百分比
var option = {
  grid: {
    left: 120,
    right: "30%",
    height: "40%",
    bottom: 100,
  },
};

echarts 常用属性

（1）使用 ECharts 绘图后没有图像（这个问题会经常出现，一定要设置宽度高度！！！）

ECharts 绘图后没有任何报错，但是没有图像。可以检查容器是否设置了宽高。因为 ECharts 不会设置默认宽高，如果容器没有设置宽高，则不会展示;如果使用的是 v-chart 则没有这个问题，因为 v-chart 默认了 600*400 的宽高。

（2）使用 element-ui 的按需引入

安装vue add element，后续会提示是全部引入或者按需引入，选择按需引入，在 App.vue 中会增加一些 element-ui 的示例代码，后续删除。项目目录会增加一个 plugin 文件夹

注意：按需引入组件后，再删除 App.vue 以及 view 文件夹内、component 文件夹内的不需要的内容。

1
2
// main.js
import "./plugins/element.js";
1
2
3
4
5
6
7
// element.js
import Vue from "vue";
import { Card, Col, Row } from "element-ui";

Vue.use(Card);
Vue.use(Col);
Vue.use(Row);

（3）vue 使用 echarts

1
2
3
// main.js 引入echarts 挂载到Vue实例
import ECharts from "echarts";
Vue.prototype.$echarts = ECharts;

（4）echarts 的常用属性

1、隐藏线条 - listStyle

1
2
3
listStyle: {
  width: 0;
}

2、隐藏数据点 - itemStyle

1
2
3
itemStyle: {
  opacity: 0;
}

3、折线图填充面积区域颜色 - areaStyle

1
2
3
areaStyle: {
  color: "purple";
}

4、折线图平滑显示 - smooth

1
smooth: true;

5、柱状图聚合 - stack

1
2
3
4
5
6
7
8
9
10
11
12
series: [
  {
    type: "bar",
    stack: "总量",
    data: [100],
  },
  {
    type: "bar",
    stack: "总量",
    data: [250],
  },
];

6、自定义绘图(重点)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
{
  type: 'custom',
  stack: '总量',
  data: [100],
  renderItem: (params, api) => {
    //  console.log(params,api);
    const value = api.value(0)
    const endPoint = api.coord([value, 0])
    return {
      type: 'group',
      position: endPoint,
      children: [{
        type: 'path',
        shape: {
          d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',// 这里是svg里面的d
          x: -5,
          y: -20,
          width: 10,
          height: 10,
          layout: 'cover'
        },
        style: {
          fill: '#45c946'
        }
      }, {
        type: 'path',
        shape: {
          d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
          x: -5,
          y: 10,
          width: 10,
          height: 10,
          layout: 'cover'
        },
        style: {
          fill: '#45c946'
        }
      }]
    }
  }
}

7、xAxis x 轴

1
2
3
4
5
6
7
8
9
10
11
12
// 消除x轴两侧边距
boundaryGap: false
// 柱状图宽度
barWidth: '60%'
barWidth: 10
// 条形图 type设置方法
xAxis: {
  type: 'value'
},
yAxis: {
  type: 'category'
}

8、echarts 类目轴和非类目轴

类目轴的意思就是坐标轴上的展示信息是否是数据连贯，非类目轴就是除了标签类型为类目的其他坐标轴，有 时间（time），数值（value），对数（log）3 种。标签类型为类目是指 type:category

坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。类目轴中  boundaryGap  可以配置为  true  和  false。默认为  true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。非类目轴，包括时间，数值，对数轴，boundaryGap 是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置  min  和  max  后无效。