一、svg 学习
svg 双闭合标签,默认宽度与高度 300 * 150,绘制图形务必在 svg 标签内部,可以通过样式设置宽度和高度。
- 基本使用
- line 标签,创建一条直线
- polyline ,创建折线 默认填充
- rect, 创建矩形
- circle , 创建圆
- ellipse, 创建椭圆
- polygon, 创建多边形 默认填充
- path, 创建任意图形(通过指定点以及点和点之间的线) 默认填充
注意: 属性 fill-opacity 可以设置填充颜色的透明度,fill 属性可以设置填充颜色,stroke 可以设置绘制线的颜色。
- 详细使用:
<!-- svg双闭合标签:默认宽度与高度300 * 150 svg绘制图形务必在svg标签内部使用绘制图形 -->
<svg class="box">
<!-- x1 y1第一个点的坐标 x2 y2 第二个点的坐标 -->
<line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
<line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
<!-- 绘制折线:可以多个点,多个点的时候,最好带有逗号 -->
<polyline points="300 300, 50 100, 120 400,20,20" fill-opacity="0" stroke="cyan"></polyline>
<!-- 绘制矩形 -->
<!-- fill属性:设置填充颜色的 fill-opacity设置填充颜色的透明度 stroke:线的颜色 -->
<rect x="400" y="400" width="150" height="50" fill="pink"></rect>
<!-- 绘制圆形 -->
<circle cx='370' cy='95' r='50' style='stroke:cyan; fill:none'></circle>
<!-- 绘制圆形|椭圆 -->
<ellipse cx="500" cy="500" rx="100" ry="50" style="fill:black;"></ellipse>
<!-- 多边行 -->
<polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0" />
<!-- 绘制任意图形 -->
<path fill-opacity="0" stroke="skyblue" d="
M 10 10
L 20 400
L 30 120
L 40 66
L 50 99
L 60 120
L 70 99
Z
"></path>
</svg>
二、ECharts 学习
1. 一个页面显示多个图表
注意: series中的配置项 type 的值: bar 柱状图, line 折线图, pie 饼图, scatter 散点图(散点图的series配置项中的data,是二维数组)
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
<script>
let box1 = document.querySelector('.box1');
let box2 = document.querySelector('.box2');
var myChart1 = echarts.init(box1);
var myChart2 = echarts.init(box2);
var options1 = {
// 图表的标题
title: {
text: '数据可视化',
subtext: '数据可视化学习',
// 主标题位置
left: 'center',
// 主标题颜色
textStyle: {
color: 'blue'
},
},
// x轴
xAxis: {
// 数据
data: ['衣服', '直播', '游戏', '电影'],
},
// y轴
yAxis: {
axisLine: {
show: true,
},
axisTick: {
show: true,
}
},
// 图表类型 数据设置
series: [
{
type: 'bar',
data: [10, 20, 30, 40],
}
]
}
var options2 = {
title: {
text: '折线图',
subtext: '数据可视化学习折线图',
// 设置子标题颜色
subtextStyle: {
color: 'green'
},
// 主标题位置
left: 'center',
// 主标题颜色
textStyle: {
color: 'red'
},
},
xAxis: {
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
},
yAxis: {
},
series: [
{
type: 'line',
data: [10, 20, 15, 40, 50, 38, 100],
}
]
}
myChart1.setOption(options1);
myChart2.setOption(options2);
</script>
2. 一个容器内显示多个图表
在series配置项里面,写多个对象,每个对象对应一个图表
<script>
let div = document.querySelector('div');
var myChart = echarts.init(div);
var options = {
title: {
text: '数据可视化',
subtext: 'echarts基本使用',
textStyle: {
color: 'green',
},
left: 'center',
},
xAxis: {
data: ['衣服', '直播', '游戏', '电影'],
},
yAxis: {
axisLine: {
show: true,
},
axisTick: {
show: true,
}
},
series: [
// 柱状图
{
type: 'bar',
data: [10, 20, 30, 40],
color: 'red',
},
// 折线图
{
type: 'line',
data: [10, 20, 30, 40],
},
// 饼图
{
type: 'pie',
// 饼图可以显示文字,data的写法如下
data: [
{
value: 10,
name: 'x',
},
{
value: 20,
name: 'y',
},
{
value: 30,
name: 'z',
},
{
value: 40,
name: 'w',
},
],
// 可以设置饼图整体的宽度和高度
width: 150,
height: 150,
// 可以设置饼图的位置
left: 100,
top: 50,
// 由于宽度和高度可能设置过小 导致文字不显示,因此要设置饼图合适的半径
radius: 25,
}
]
};
myChart.setOption(options);
</script>
3. ECharts 新特性: dataset
数据集(dataset)组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射.这一特性能够将逻辑和数据分离,带来更好的复用,并易于理解.
准备一个二维数组data作为数据集,在配置项中写 dataset:{source:data},在series中的每一个对象中加上配置项encode:{y:index} 其中index表示对应data中第几列索引值为数据,注意在这里 饼图中对应的配置项是 encode:{itemName:index,value:index}
<script>
let div = document.querySelector('div');
var myChart = echarts.init(div);
// 数据集:二维数组
let data = [
["衣服", 10, 22, 'x', 13],
["直播", 12, 55, 'y', 63],
["游戏", 16, 44, 'z', 53],
["电影", 19, 32, 'w', 73],
];
var options = {
// 设置字符集
dataset: {
source: data,
},
title: {
text: '数据可视化',
subtext: 'echarts基本使用',
textStyle: {
color: 'green',
},
left: 'center',
},
xAxis: {
data: ['衣服', '直播', '游戏', '电影'],
},
yAxis: {
axisLine: {
show: true,
},
axisTick: {
show: true,
}
},
series: [
// 柱状图
{
type: 'bar',
// data: [10, 20, 30, 40],
color: 'red',
encode: {
y: 1, // 代表使用的是字符集当中索引值为 1 的数据 ,10 12 16 19
},
},
// 折线图
{
type: 'line',
// data: [10, 20, 30, 40],
encode: {
y: 2, // 代表使用的是字符集当中索引值为 1 的数据 ,10 12 16 19
},
},
// 饼图
{
type: 'pie',
// 饼图可以显示文字,data的写法如下
// data: [
// {
// value: 10,
// name: 'x',
// },
// {
// value: 20,
// name: 'y',
// },
// {
// value: 30,
// name: 'z',
// },
// {
// value: 40,
// name: 'w',
// },
// ],
// 可以设置饼图整体的宽度和高度
width: 150,
height: 150,
// 可以设置饼图的位置
left: 100,
top: 50,
// 由于宽度和高度可能设置过小 导致文字不显示,因此要设置饼图合适的半径
radius: 25,
encode: {
// 饼图旁边的文字
itemName: 3,
value: 4,
},
}
]
};
myChart.setOption(options);
</script>