I'm Dory Wang.
- 💻 Life Hack: May your choices reflect your hopes not your fears.
在Vue项目中使用Echarts
所需工具: Vue + Vue CLI + Echarts
1.使用Vue CLi构建Vue项目,并引入Echarts,引入方式见官网
在这里用npm的方式引入:
npm install echarts --save
现在开始尝试实现官网给出的柱状图示例。
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的配置项说明:
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文件内
项目中遇到一个需求,将Y轴数据源中的不同字段用对应的自定义图标展示,正好Echarts支持自定义系列图表,实现起来挺方便~
所以我又自己做了一个小栗子,总结一下Echarts自定义系列的用法。
这是下文例子的成品demo,包含两个系列(series)的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支持两个参数: 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
关键字返回一个图形对象,并在其中指定具体的图形内容,如果什么都不渲染,可以不返回任何东西(直接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,
}),
};
}
}
重复上述逻辑,即可完成对数据进行自定义图标的渲染啦~~
以使用频率较高的颜色开始走起~!
如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。
官方文档给出的默认颜色列表为:
['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
但实际上默认取的是上述列表中的第一项'#c23531',所以问题来了,说好的颜色循环呢???
这是因为,颜色循环针对的是不同的度量(图例代表的统计量),有几种度量,就会循环几种颜色,以下图为例,只有一个度量-销量,所以默认只取了一种颜色。
对于颜色的设置,可以设置全局的颜色,也可以设置各个系列自己专属的颜色。
直接在Option中设置color的值,即表现为全局的颜色;
在Option的series配置项中设置color的值,即为对应系列专属的颜色;
以上图示例为起点,现在只需再增加几个度量,设置全局颜色时就可以指定需要循环显示的颜色啦~
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']
效果如图;-)
各个系列对应的样式分为普通样式和高亮样式(鼠标悬浮到图形元素上时图形颜色)
两种样式都在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: {
}
}
},
源码见仓库
未完待续;-)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.