1、通过npm install echarts --save安装。
npm install echarts --save
2、创建一个带有宽高的盒子。
<div id="main" style="width: 100%; height: 400px"></div>
3、在组件中全局引入 。
// 引入echarts
import * as echarts from "echarts";
4、在组件中使用模板(如柱状图)
<script setup lang="ts">
// 引入echarts
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
onEcharts();
});
function onEcharts() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
// 标题
title: {
text: "巡查上报记录数量",
// 标题样式
textStyle: {
fontSize: 18,
color: "#FFFFFF", // 主标题文字颜色
},
},
// 提示信息
tooltip: {},
// 包括了坐标轴标签在内的所有内容所形成的矩形的位置。作用可以用来使坐标轴文字完全显示出来
grid: {
containLabel: true,
bottom: "5%",
},
// x轴
xAxis: {
// 数据类型
type: "value",
//坐标轴刻度标签的相关设置
axisLabel: {
color: "#fff",
},
},
// y轴
yAxis: {
// 类目类型
type: "category",
//坐标轴刻度标签的相关设置
axisLabel: {
color: "#fff", //x轴文字颜色
},
data: ["交通事故", "路面", "桥面", "日常养护", "路基", "交安设施"],
},
// 系列列表(用来设置柱状图)
series: [
{
name: "数量",
// 柱状图bar
type: "bar",
data: [
{
value: 5,
// 设置单个柱子的样式
itemStyle: {
color: "#f0768b",
},
},
{
value: 5,
// 设置单个柱子的样式
itemStyle: {
color: "#91cc75",
},
},
{
value: 20,
// 设置单个柱子的样式
itemStyle: {
color: "#f0768b",
},
},
{
value: 16,
// 设置单个柱子的样式
itemStyle: {
color: "#91cc75",
},
},
{
value: 10,
// 设置单个柱子的样式
itemStyle: {
color: "#f0768b",
},
},
{
value: 10,
// 设置单个柱子的样式
itemStyle: {
color: "#91cc75",
},
},
{
value: 20,
// 设置单个柱子的样式
itemStyle: {
color: "#f0768b",
},
},
],
},
// {
// name: "数量",
// // 柱状图bar
// type: "line",
// data: [5,5,20,16,10,10,20],
// },
],
// 工具栏
toolbox: {
// 是否显示
show: true,
// 工具栏 icon 每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
itemGap: 4,
iconStyle: {
// 工具栏边框颜色
borderColor: "#fff",
},
// 工具栏配置项
feature: {
// 区域缩放
dataZoom: {
yAxisIndex: "none",
title: {
//缩放和还原的标题文本
zoom: "区域缩放",
back: "区域缩放还原",
},
},
// 动态类型切换
magicType: {
type: ["line", "bar"],
title: {
line: "切换为折线图",
bar: "切换为柱状图",
},
},
// 配置项还原(刷新)
restore: {
title: "配置项还原",
},
// 保存为图片
saveAsImage: {
title: "保存为图片",
},
},
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
5、效果图。
注:相关属性可查看echarts的文档配置项手册。
6、配置项介绍。
// 标题
title: {
text: "巡查上报记录数量",
link:'http://www.baidu.com',//超链接
target:'self',//超链接打开方式,当前页self
backgroundColor:'pink',//背景色
borderColor:'pink',//边框色
borderWidth:5,//边框粗细
x:'center',//水平居中
subtext:'副标题',
sublink:'http://www.baidu.com',//副标题超链接
//主标题文字样式
textStyle: {
fontSize: 18,//文字大小
color: "#FFFFFF", // 主标题文字颜色
},
//副标题文字样式
subtextStyle: {
fontSize: 18,//文字大小
color: "#FFFFFF", // 主标题文字颜色
},
},
// 提示信息
tooltip: {
trigger:'axis',//触发类型,默认是item图形触发,axis是坐标轴触发
//坐标轴指示器
axisPointer:{
type:'shadow' //shadow阴影效果 line实线 cross 十字准星
},
showContent:false,//提示悬浮框是否显示
backgroundColor:'pink',//悬浮框背景色
//自定义提示框信息
formatter(re){
console.log(re)
for(let i ,i<=re.length,i++){
return '数量:'+re.data.value
}
}
},
//图例
legend:{
show:true,//设置图例的显示与隐藏
icon:'circle',图例形状设置,这里是圆形
top:'10%',//图例位置设置,通过方位名词设置
itemWidth:10,//图例宽度
itemHeight:20,//图例高度
textStyle:{//文字样式设置
color:'pink',
}
}
//柱状图
series:[
type: "bar",
//设置柱状图宽度
barWidth:20,
//设置全部轴颜色
color:'pink',
//单独设置每个轴的颜色
itemStyle:{
normal:{
color:function (params){
let colorList = [
'pink',
'red',
'#c23531',
'#c23532',
]
return colorList[parmas.dataIndex]
}
}
},
//设置最大值最小值
markPoint:{
data:[
{
type:'max',
name:'最大值'
},
{
type:'min',
name:'最小值'
}
]
},
markLine:{
data:[
{
type:'average',
name:'平均值'
}
]
}
]
//饼状图
legend:{
left:'left',
//图例的布局朝向
orient:'verical'
}
series:[
type: "pie",
]