栏目一：使用echarts绘制简单图形
前言
1. 在线编辑图形
1.1 折线图
以下是官网的一个简单示例
代码介绍
// ECharts 配置对象
option = {
// X 轴配置
xAxis: {
// X轴类型，'category' 表明是类目轴，适用于离散的类目数据
type: 'category',
// X轴上的数据，数组项表示类目名
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
// Y 轴配置
yAxis: {
// Y轴类型，'value' 表明是数值轴，适用于连续数据
type: 'value'
},
// 系列列表，每个系列通过 type 决定渲染成哪种图表
series: [
{
// 数据数组，数组项通常为具体的数据值
data: [150, 230, 224, 218, 135, 147, 260],
// 图表类型，'line' 表示折线图
type: 'line'
}
]
};
1.2 柱状图
简单柱状图展示
代码介绍
// ECharts 配置对象
option = {
// X 轴配置
xAxis: {
// X轴类型，'category' 表明是类目轴，适用于离散的类目数据
type: 'category',
// X轴上的数据，数组项表示类目名
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
// Y 轴配置
yAxis: {
// Y轴类型，'value' 表明是数值轴，适用于连续数据
type: 'value'
},
// 系列列表，每个系列通过 type 决定渲染成哪种图表
series: [
{
// 数据数组，数组项通常为具体的数据值，但也可以是包含值和样式的对象
data: [
120, // 周一的数据
{
value: 200, // 周二的数据值
itemStyle: { // 数据点的样式配置
color: '#a90000' // 将周二的数据点颜色设置为红色
}
},
150, // 周三的数据
80, // 周四的数据
70, // 周五的数据
110, // 周六的数据
130 // 周日的数据
],
// 图表类型，'bar' 表示柱状图
type: 'bar'
}
]
};
1.3 扇形图
扇形图示例
代码介绍
// ECharts 配置对象
option = {
// 提示框组件，用于展示更详细的数据信息
tooltip: {
// 触发类型，'item' 表示数据项图形触发，主要在类目轴（category axis）上使用
trigger: 'item'
},
// 图例组件，用于展示系列的标记（symbol）、颜色和名字
legend: {
// 图例组件距离容器上边界的距离，单位可以是像素（px）或百分比（%）
top: '5%',
// 图例组件距离容器左边界的距离，这里设置为居中
left: 'center'
},
// 系列列表，每个系列通过 type 决定渲染成哪种图表
series: [
{
// 系列名称，用于 tooltip 的显示，legend 的图例筛选
name: 'Access From',
// 图表类型，'pie' 表示饼图
type: 'pie',
// 饼图的半径范围，数组的第一项是内半径，第二项是外半径
radius: ['40%', '70%'],
// 是否启用标签的防重叠策略，这里设置为 false 表示不启用
avoidLabelOverlap: false,
// 扇形的圆角角度，用于绘制圆角的扇形
padAngle: 5,
// 扇形的样式设置
itemStyle: {
// 扇形的边框圆角
borderRadius: 10
},
// 标签的显示设置
label: {
// 是否显示标签
show: false,
// 标签的位置
position: 'center' // 注意：由于 show 设置为 false，这里的位置设置实际上不会生效
},
// 高亮状态的样式设置
emphasis: {
// 高亮时标签的显示设置
label: {
// 是否显示标签
show: true,
// 标签的字体大小
fontSize: 40,
// 标签的字体粗细
fontWeight: 'bold'
}
},
// 是否显示扇区到标签的连线
labelLine: {
show: false
},
// 数据内容数组，表示每个扇区的数值和名称
data: [
{ value: 1048, name: 'Search Engine' }, // 搜索引擎来源
{ value: 735, name: 'Direct' }, // 直接访问
{ value: 580, name: 'Email' }, // 邮件营销
{ value: 484, name: 'Union Ads' }, // 联盟广告
{ value: 300, name: 'Video Ads' } // 视频广告
]
}
]
};
2. 本地绘制图表
2.1 下载echarts.min.js
下载链接：https://gitee.com/hope_xi/common-js-files/blob/master/echarts.min.js#
选择echarts.min.js下载
如果觉得下载麻烦，也可以直接复制echarts.min.js代码，在本地创建echarts.min.js文件后把代码拷贝进取，保存。
2.2 创建一个简单的图形
常见一个demo.html文件，放入下方代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="../js/echarts.min.js"></script>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
padAngle: 5,
itemStyle: {
borderRadius: 10
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
option && myChart.setOption(option);
</script>
</html>
打开页面，便可看到echart图表
接下来就可以根据自己的项目选择合适的图表进行展示了。
具体图形设置可以观看echart配置项手册
后续我也会分享一些自己平时用到的好看的图表。