dorydm / echarts-demos Goto Github PK

View Code? Open in Web Editor NEW

7.0 7.0 3.0 2.79 MB

在Vue项目中使用Echarts

JavaScript 5.56% HTML 3.24% Vue 91.20%

echarts-demos's Introduction

Hi there 👋

I'm Dory Wang.

👩 About Me

💻 Life Hack: May your choices reflect your hopes not your fears.

🛠️ Technologies and Tools I use

echarts-demos's People

Contributors

Stargazers

Watchers

Forkers

msdgwzhy6 williezhang fzuhww

echarts-demos's Issues

起步-在Vue中使用Echarts之实现简单柱状图

所需工具: Vue + Vue CLI + Echarts

第一步，初始化Vue项目&引入Echarts

1.使用Vue CLi构建Vue项目，并引入Echarts，引入方式见官网
在这里用npm的方式引入:

npm install echarts --save

第二步，如果上述步骤没出啥意外，就可以在Vue项目中愉快的使用Echarts了;-)

现在开始尝试实现官网给出的柱状图示例。

1.在script里引入echarts

import echarts from 'echarts'

2.在data初始化一个Echarts示例并配置option

data() {
      return {
        chart: null,
        option:  {
            title: {
                text: 'Biu~简单柱状图示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }],
            color: ['#66FF99']
        }
      }

关于option的配置项说明:

title: 标题组件，包含主标题和副标题。
tooltip: 提示框组件
legend: 图例组件
xAxis: 直角坐标系 grid 中的 x 轴
yAxis: 直角坐标系 grid 中的 y 轴
series: 系列列表,具体设置图标项的样式，图形展示类型等。

3.接下来就是模板里的内容了，写一个极简的例子,创建一个div,并绑定ref

 <div ref="echarts">
  </div>

4.如何将模板和写好的option实例绑定起来呢，这时候就需要用到Echarts提供的API啦
（1）调用init()API,创建一个 ECharts 实例
（2）调用setOption()API,设置图表实例的配置项以及数据

methods: {
      getPage() {
        this.chart = echarts.init(this.$refs.echarts);
        // 使用刚指定的配置项和数据显示图表。
        this.chart.setOption(this.option);
      }
    }

5.到此，一个简单的Echarts柱状图就完成啦~

未完待续;-)

代码参考: 本仓库src/Views/simpleCharts文件内

第三篇-Echarts-使用自定义图标渲染数据

前言：

项目中遇到一个需求，将Y轴数据源中的不同字段用对应的自定义图标展示，正好Echarts支持自定义系列图表，实现起来挺方便~

所以我又自己做了一个小栗子，总结一下Echarts自定义系列的用法。

这是下文例子的成品demo，包含两个系列(series)的Echarts图，其中一个是普通的折线图，另一个则是根据数据自定义的系列(不同数据用不同图标展示)。

一、Echarts自定义系列简介

在Echarts中，每个series(系列)可以通过type决定是哪种图表类型，官方目前支持22种不同的type类型。自定义类型custom属于其中的一种。

自定义系列支持开发者自定义图表中需要渲染哪种图形元素，核心API如下:

series: [
  {
    type: custom, //指定系列类型为自定义类型
    name: '自定义系列', //指定系列的名称
    renderItem: renderItem,//配置自定义系列的内容
    data: data
  }
]

其中，最重要的配置项为renderItem配置项(类型为函数)，图表的每一项数据在进行渲染时都会调用该函数，并返回自定义的图表内容：

  let renderItem = function(params, api) {
      console.log(params, "renderItem_params");
      console.log(api, "renderItem_api");
  }

二、自定义系列配置项说明

renderItem形参说明

renderItem支持两个参数: params、api：

params参数返回每项data数据项的信息及坐标系的信息:

api参数主要返回一些方法API(文档传送门):

其中，最常用的两个API为：

api.value()--取出 dataItem 中的数值

api.coord()--进行坐标转换计算

例如series的data项数据为[1,2,3,4]，打印出api.value()的值如下:

api.coord()最常用的功能为将api.value()获取到的数值转换为对应的坐标点，以便将图形绘制到图表中：

renderItem-return项说明

renderItem通过return关键字返回一个图形对象，并在其中指定具体的图形内容，如果什么都不渲染，可以不返回任何东西(直接return)。

 let renderItem = function(params, api) {
     return {
       type: '', //指定图形的类型
       //指定图形的尺寸、坐标轴相对位置
       shape: {
          x: x, 
          y: y,
          width: width,
          height: height
       },
       //指定图形的细节样式
       style: api.style({
          lineWidth: 1
       }) 
     }
  }

三、实战

场景假设：series中的data数据为[1,2,3,4],现在为每个数据项设置不同的自定义图标。即数字1到4需要用相应的图标渲染至图表中。

首先，指定两个系列，将其中一个系列类型设置为自定义类型(其中类型为折线图的系列只作为普通图表作为对照，不需要过多关注。）

let series = [
    {
      name: "普通折线",
      type: "line",
      data: [1, 2, 3, 4]
    },
    {
      name: "自定义系列",
      type: "custom",
      renderItem: renderItem,
      yAxisIndex: 1,
      data: [1, 2, 3, 4]
    },
 ];

接下来，到了重头戏环节，配置renderItem函数:

第一步，利用坐标转换API将数据转换为坐标轴对应的点的位置:

 let renderItem = function(params, api) {
     let point = api.coord([api.value(0), api.value(1)]);
   }

第二步，利用获取数据的API进行判断，并指定对应的数据所需渲染的图标内容

本例中，选取return_path的图标渲染方式，即使用 SVG PathData 做图标的路径进行渲染，这种方式可以用来绘制第三方图标及其他各种图形。

比如，从阿里巴巴矢量图标库中引入SVG图标的方式如下：

步骤1：从官网复制SVG代码

步骤2：将代码中path标签里的d属性中的内容提取出来，此即为我们需要的SVG路径

指定好图标内容后，可以利用api.style()对图标再进行细节的样式优化：

let renderItem = function(params, api) {
   let point = api.coord([api.value(0), api.value(1)]);
   //根据data中的数据指定需要渲染的图标
   if (api.value(0) == 1) {
     return {
       //图标类型为path类型，通过SVG代码引入第三方图标
       type: "path",
       shape: {
         pathData: "",
         x: params.coordSys.x / 30,
         y: params.coordSys.y / 60,
         width: 30,
         height: 30,
       },
       position: point,
       style: api.style({
         fill: "red",
         lineWidth: 1,
       }),
     };
   }
}

重复上述逻辑，即可完成对数据进行自定义图标的渲染啦~~

第二篇-Vue中使用Echarts-自定义柱状图的样式

以使用频率较高的颜色开始走起~！

一.自定义颜色

如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
官方文档给出的默认颜色列表为:

['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

但实际上默认取的是上述列表中的第一项'#c23531'，所以问题来了，说好的颜色循环呢？？？
这是因为，颜色循环针对的是不同的度量(图例代表的统计量)，有几种度量，就会循环几种颜色，以下图为例，只有一个度量-销量，所以默认只取了一种颜色。

对于颜色的设置，可以设置全局的颜色，也可以设置各个系列自己专属的颜色。

直接在Option中设置color的值，即表现为全局的颜色；
在Option的series配置项中设置color的值，即为对应系列专属的颜色；

1.设置全局颜色

以上图示例为起点，现在只需再增加几个度量，设置全局颜色时就可以指定需要循环显示的颜色啦~

第一步，增加图例

legend: {
                data:['销量','支出','收入']
            },

第二步, 增加度量数据

 series: [{
                name: '销量',
                type: 'bar',
                data: [30, 20, 36, 40, 50, 60],
        
            },
            {
                name: '支出',
                type: 'bar',
                data: [200, 310, 120, 320, 200, 100],
               
            },
            {
                name: '收入',
                type: 'bar',
                data: [100, 200, 600, 300, 400, 800],
               
            }
            ]

此处要注意: series中每个数据项都要写name(每个数据项对应的图例名称),否则会影响图例的展示

第三步,设置全局颜色

color: ['#66FF99','#FFFF00','#FF00FF']

效果如图;-)

2.设置各个系列的颜色

各个系列对应的样式分为普通样式和高亮样式(鼠标悬浮到图形元素上时图形颜色)

两种样式都在option配置项里的series中设置。

配置项写法因Echarts的版本而有所差异；

Echarts4.0+以上的版本的写法为:

series: {
        // 普通样式
        itemStyle: 
            color: 'red'
        },
        // 高亮样式
        emphasis: {
            itemStyle: {
                color: 'blue'
            }
        }
    }

在Echarts4以前，普通样式的写法：

series: {
        // 普通样式
        itemStyle: 
             normal: {
                color: 'red'
            },
        }
    }

对于版本差异，官方给出的建议是:“这种写法仍然被兼容，但是不再推荐”

通过对系列的普通样式的颜色设置，就算只有一种度量数据，也照样可以愉快的对每个柱子设置不同的颜色。比如实现如下效果：

关键步骤: itemStyle里自定义一个颜色列表，然后根据数组下标循环颜色就好了~(在这里遵循Echarts4.0+的语法写)

series: {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                itemStyle: {
                  color: function(params) {
                    let colorList = ['#00FFFF','#C0C0C0','#FFFF00','#66FF99','#000000','#FF0000']
                    return colorList[params.dataIndex]
                  }
                }
            },

对于高亮样式也是一样的道理啦~如果不特意指定高亮时的颜色，各系列的颜色会默认与普通样式一致。

高亮样式的写法:

 series: {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                itemStyle: {
                  color: function(params) {
                    let colorList = ['#00FFFF','#C0C0C0','#FFFF00','#66FF99','#000000','#FF0000']
                    return colorList[params.dataIndex]
                  }
                },
                emphasis: {
                   itemStyle: {
                  
              
                }
              }
             },

源码见仓库