一.echarts库介绍
echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
该库可完成折线图、柱状图、饼图及其变种的面积图、环状图、曲线图的绘制。
二.echarts库下载
npm install echarts –save
三.echarts库的使用
Html:
- <script src="js/echarts.min.js"></script>//导入js
- var echart = echarts.init(document.getElementById("container"))//创建实例，绑定body中id叫container的元素
- var option = {……}//定义配置项（图像的属性）
- echart.setOption(option);//实现图表
Vue:
- import * as echarts from 'echarts'
- this.lineChart = echarts.init(this.$refs.lineChart)//创建实例
- this.lineChart.setOption({……})//定义配置项（图像的属性）及实现图表
四echarts库的格式及部分属性：
- 基础格式：
title: { //标题配置 }, tooltip: { //提示框配置(当鼠标悬停在沿轴的数据点上时，会触发提示框。) }, legend: { //图例（每个对象数据的小图标）配置 }, grid: {//网格（图像）配置 }, toolbox: {//工具栏 }, xAxis: {//x轴配置 }, yAxis: {//y轴配置 }, series: [//对象数据组（有几个对象就写几个） ]
- 部分属性
title: { //标题配置 text: '评价数据分析' }, tooltip: { //提示框配置(当鼠标悬停在沿轴的数据点上时，会触发提示框。) trigger: 'axis' }, legend: { //图例配置 icon: 'circle',// 圆形标点 left: 'center',// 居中 top: 0,// 距离元素上面为零 data: ['好评', '一般', '差评']// 三个图例（好评， 一般， 差评） }, grid: {//网格配置 left: '3%',// 左边的空白区域占整个图表的百分比（类似于padding） right: '3%', bottom: '3%', containLabel: true //表示网格区域是否包含坐标轴的刻度标签 }, toolbox: {//工具栏 feature: {// 按钮 saveAsImage: { //保存图片为png type: 'png' }, magicType: {// 可以转换图表为折线、柱状、堆叠 type: ['line', 'bar', 'stack'] } } }, xAxis: { type: 'category',// 表示 X 轴的类型是类别型，通常用于显示离散的类别数据，例如月份、地区等。 boundaryGap: false,//是否对齐刻度，如果为false，则会紧贴左右图表 data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']//x坐标轴的数据 }, yAxis: { type: 'value' //数值 }, series: [//对象数据组（有几个对象就写几个） { name: '好评', type: 'line',//展现形式（折线） // smooth: true, // 平滑曲线显示 data: [120, 132, 101, 134, 190, 230, 210, 201, 234, 290, 230, 210] }, { name: '一般', type: 'line', // smooth: true, areaStyle: {//填充颜色 color: 'rgba(128, 255, 165, 0.3)' }, data: [100, 82, 91, 54, 90, 76, 110, 81, 104, 90, 130, 110] }, { name: '差评', type: 'line', // smooth: true, data: [10, 22, 21, 14, 19, 13, 20, 11, 34, 29, 20, 10] }, { name:"成绩", // 饼形图 type:"pie", // radius:80, // 半径(第一个是外半径，第二个是内半径) radius:[80,60], // 位移(图像中心为0) left:-80, top:-200, // 数据 data:[ {name:"js",value:90}, {name:"html",value:85}, {name:"jq",value:90}, {name:"vue",value:50}, ], tooltip: {//提示框 trigger: "item",//悬停在图形的数据项上时触发提示框。 formatter: "{a} <br/>{b}: {c} ({d}%)"//formatter 定义了提示框的内容格式。{a} 表示系列名，这里可能是"成绩"。<br/> 是一个换行符，用于在提示框中进行换行。{b} 表示数据项的名称，这里可能是饼图的每个部分的名称（例如："js"、"html"、"jq"、"vue"）。{c} 表示数值，即每个部分的具体数值。{d} 表示百分比，即每个部分所占的百分比。 } } ]
（3）运行结果：
好了echats库的简单使用就到这里了，想了解更多的操作可以去官网查看哦！
五.部分图表代码模板：
饼图：
<template>
<nav>
<div>
<!-- echarts 图表容器 -->
<div ref="myChart" style="width: 400px; height: 400px; padding: 20px; border-radius: 20px;"></div>
</div>
</nav>
</template>
<script>
import * as echarts from 'echarts'
export default {
mounted() {
// 初始化 echarts 图表
this.myChart = echarts.init(this.$refs.myChart)
// 设置 echarts 图表的配置项
this.myChart.setOption({
// 标题
title: {
text: '520', // 主标题文本
subtext: '评价数', // 副标题文本
left: 'center', // 标题水平居中
top: '43%', // 标题垂直居中
subtextStyle: {
fontSize: 18 // 副标题字体大小
}
},
// 提示框
tooltip: {
trigger: 'item' // 触发类型为数据项
},
// 图例
legend: {
icon: 'circle', // 图例的图标形状
top: '0', // 图例距离容器顶部的距离
left: 'right' // 图例水平靠右对齐
},
// 系列（饼图）
series: [
{
name: '咨询数量',
type: 'pie',
radius: ['40%', '55%'], // 饼图的半径范围
label: {
show: true,
padding: [0, -60], // 文本距离图形的内边距
overflow: 'none', // 文本溢出处理，'none' 不处理
fontSize: '15', // 文本字体大小
fontWeight: 'bold', // 文本字体粗细
formatter: '{d}%\n\n{c}' // 标签内容格式器，{d} 代表百分比，{c} 代表数据值
},
labelLine: {
show: true,
length: 15, // 引导线线长
length2: 60 // 引导线第二段线长
},
itemStyle: {
normal: {
// 饼图每个扇区的颜色
color: function (params) {
var colorList = ['#4FC3F7', '#00C853', '#F57F17']
return colorList[params.dataIndex]
}
}
},
// 数据项
data: [
{ name: '优', value: 200 },
{ name: '良', value: 200 },
{ name: '差', value: 120 }
]
}
]
})
}
}
</script>
折线图/柱状图：
<template>
<div>
<!-- echarts 折线图容器 -->
<div ref="lineChart" style="width: 800px; height: 400px; background-color: #ffffff; padding: 20px; border-radius: 20px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
mounted() {
// 初始化 echarts 折线图
this.lineChart = echarts.init(this.$refs.lineChart)
// 设置 echarts 折线图的配置项
this.lineChart.setOption({
// 标题
title: {
text: '成绩评级分析'
},
// 提示框
tooltip: {
trigger: 'axis' // 触发类型为坐标轴
},
// 图例
legend: {
icon: 'circle', // 图例的图标形状
left: 'center', // 图例水平居中
top: 0, // 图例距离容器顶部的距离
data: ['优', '良', '差']
},
// 网格
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true // 包含坐标轴的刻度标签
},
// 工具栏
toolbox: {
feature: {
saveAsImage: {
type: 'png' // 保存为图片按钮类型
},
magicType: {
type: ['line', 'bar', 'stack'] // 图表类型切换按钮类型
}
}
},
// X 轴
xAxis: {
type: 'category', // 类别型轴
boundaryGap: false, // 数据两端不留白
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
// Y 轴
yAxis: {
type: 'value' // 数值型轴
},
// 系列（折线图）
series: [
{
name: '优',
type: 'line',
data: [150, 130, 100, 130, 186, 265, 210, 180, 230, 290, 230, 210]
},
{
name: '良',
type: 'line',
data: [99, 82, 91, 54, 90, 59, 110, 81, 110, 90, 130, 110]
},
{
name: '差',
type: 'line',
data: [11, 20, 23, 14, 25, 10, 21, 13, 36, 28, 10, 15]
}
]
})
}
}
</script>
仪表图：
<template>
<div>
<!-- echarts 仪表图容器 -->
<div ref="gaugeChart" style="width: 400px; height: 400px; background-color: #ffffff; padding: 20px; border-radius: 20px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
mounted() {
// 初始化 echarts 仪表图
this.gaugeChart = echarts.init(this.$refs.gaugeChart)
// 设置 echarts 仪表图的配置项
this.gaugeChart.setOption({
title: {
text: '问卷好评率分析'
},
tooltip: {
trigger: 'item' // 触发类型为数据项
},
// 系列（仪表图）
series: [
{
name: '数量', // 系列名称
type: 'gauge', // 图表类型为仪表图
center: ['50%', '55%'], // 仪表图中心位置百分比
radius: '75%', // 仪表图半径
min: 0, // 最小值
max: 800, // 最大值
itemStyle: {
color: '#4FC3F7', // 仪表图整体颜色
shadowColor: 'rgba(0,138,255,0.45)' // 阴影颜色
},
// 进度条配置
progress: {
show: true, // 显示进度条
width: 20, // 进度条宽度
roundCap: true // 进度条末端形状为圆角
},
// 坐标轴线配置
axisLine: {
show: true, // 显示坐标轴线
roundCap: true, // 坐标轴末端形状为圆角
lineStyle: {
width: 20 // 坐标轴线宽度
}
},
// 仪表盘指针配置
pointer: {
show: false // 不显示指针
},
// 刻度标签配置
axisLabel: {
show: false // 不显示刻度标签
},
// 刻度配置
axisTick: {
show: false // 不显示刻度
},
// 分隔线配置
splitLine: {
show: false // 不显示分隔线
},
// 仪表盘标题配置
title: {
offsetCenter: [0, '20%'], // 标题相对于仪表盘中心的偏移量
fontSize: 20 // 标题字体大小
},
// 仪表盘数值配置
detail: {
offsetCenter: [0, '-10%'], // 数值相对于仪表盘中心的偏移量
valueAnimation: true, // 数值动画
textStyle: {
fontSize: 30 // 数值字体大小
},
formatter: '{value}' // 数值格式化
},
// 数据项
data: [
{ value: 520, name: "好评数" } // 初始数值和名称
]
}
]
})
}
}
</script>
2469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
