main.js引入echarts
//js初始化
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//在框架内初始化
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
myChart.setOption({
title: { text: "Line Chart" },
tooltip: {},
toolbox: {
feature: {
dataView: {},
saveAsImage: {
pixelRatio: 2
},
restore: {}
}
},
xAxis: {},
yAxis: {},
series: [
{
type: "line",
smooth: true,
data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]
}
]
});
myChart.setOption({
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: "vertical",
x: "right",
y:'20%',
data: ["黄焖鸡", "鸡肉沙拉", "大盘鸡", "其他"]
},
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: "center"
},
emphasis: {
show: true,
textStyle: {
fontSize: "30",
fontWeight: "bold"
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 335, name: "黄焖鸡" },
{ value: 310, name: "鸡肉沙拉" },
{ value: 234, name: "大盘鸡" },
{ value: 135, name: "其他" }
]
}
]
});
绘制饼图
饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比
因为不在直角坐标系上,所以也不需要xAxis,yAxis。
myChart.setOption({
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
data: [
{ value: 235, name: "视频广告" },
{ value: 274, name: "联盟广告" },
{ value: 310, name: "邮件营销" },
{ value: 335, name: "直接访问" },
{ value: 400, name: "搜索引擎" }
]
}
]
});
//加入属性roseType: 'angle' 变成南丁格尔图
ECharts 中有一些通用的样式,诸如阴影、透明度、颜色、边框颜色、边框宽度等,这些样式一般都会在系列的 itemStyle 里设置。例如阴影的样式可以通过下面几个配置项设置:
itemStyle: {
// 阴影的大小
shadowBlur: 200,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
itemStyle的emphasis是鼠标 hover 时候的高亮样式。
itemStyle: {
emphasis: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
深色背景和浅色标签
背景色是全局的,所以直接在 option 下设置 backgroundColor
backgroundColor: '#2c343c'
文本的样式可以设置全局的 textStyle。
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
饼图的话还要将标签的视觉引导线的颜色设为浅色。
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
设置扇形的颜色
扇形的颜色也是在 itemStyle 中设置:
//统一设置红色
itemStyle: {
// 设置扇形的颜色
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
每个扇形颜色的可以通过分别设置 data 下的数据项实现。
data: [{
value:400,
name:'搜索引擎',
itemStyle: {
color: '#c23531'
}
}, ...]
但是这次因为只有明暗度的变化,所以有一种更快捷的方式是通过 visualMap 组件将数值的大小映射到明暗度
visualMap: {
// 不显示 visualMap 组件,只用于明暗度的映射
show: false,
// 映射的最小值为 80
min: 80,
// 映射的最大值为 600
max: 600,
inRange: {
// 明暗度的范围是 0 到 1
colorLightness: [0, 1]
}
}
使用 dataset 管理数据
ECharts 4 以前,数据只能声明在各个“系列(series)”中,例如:
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {}
series: [
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
ECharts 4 提供了 数据集(dataset)组件来单独声明数据,它带来了这些效果:
- 能够贴近这样的数据可视化常见思维方式:基于数据(dataset 组件来提供数据),指定数据到视觉的映射(由 encode 属性来指定映射),形成图表。
- 数据和其他配置可以被分离开来,使用者相对便于进行单独管理,也省去了一些数据处理的步骤。
- 数据可以被多个系列或者组件复用,对于大数据,不必为每个系列创建一份。
- 支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。
入门例子
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
xAxis: {type: 'category'},
// 声明一个 Y 轴,数值轴。
yAxis: {},
// 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
或者也可以使用常见的对象数组的格式:
legend: {},
tooltip: {},
dataset: {
// 这里指定了维度名的顺序,从而可以利用默认的维度到坐标轴的映射。
// 如果不指定 dimensions,也可以通过指定 series.encode 完成映射,参见后文。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]