<template>
<div>
<h1>第一种在vue中使用echart的方式</h1>
<div class="charts">
<div id="barGraph" style="height: 350px"></div>
</div>
<div class="charts">
<div id="pieGraph" style="height: 450px"></div>
</div>
<div class="chartsTwo">
<div id="pieGraphTwo" style="height: 450px"></div>
</div>
</div>
</template>
<script>
// 引入基本模板,按需加载
const echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入柱状图
require('echarts/lib/chart/pie')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
name: 'WelcomePage',
data() {
return {}
},
mounted() {
this.drawBar()
this.drawPie()
this.drawPieer()
},
methods: {
drawBar() {
// 基于dom,初始化echarts实例
const barGraph = echarts.init(document.getElementById('barGraph'))
// 绘制图表
barGraph.setOption({
title: {
text: '资源总览',
left: '20px',
textStyle: {
color: '#436EEE',
fontSize: 20,
},
},
tooltip: {
trigger: 'axis',
},
legend: {
itemWidth: 15,
itemHeight: 15,
data: ['一般问题', '严重问题'],
},
xAxis: {
data: ['德州', '菏泽', '淄博', '泰安', '烟台', '建设公司', '临沂', '滨州', '东莞', '枣庄', '济南', '威海', '济宁', '青岛', '潍坊', '聊城', '日照', '莱芜'],
splitLine: {
show: false,
},
// 去掉x轴刻度线
axisTick: {
show: false,
},
axisLable: {
show: false,
textStyle: {
fontSize: 22,
fontWeight: 700,
},
},
axisLine: {
//这是x轴文字颜色
lineStyle: {
color: '#6683a5',
fontFamily: '微软雅黑',
},
},
//横轴的字变为倾斜
axisLabel: {
interval: 0,
rotate: 40,
},
},
yAxis: {
splitLine: {
show: false,
},
axisLine: {
//这是y轴文字颜色
lineStyle: {
color: '#6683a5',
fontSize: 40,
},
},
axisLabel: {
textStyle: {
show: true,
fontFamily: '微软雅黑',
color: '#6683a5',
fontSize: '15',
},
},
},
series: [
// {
// name: '一般问题',
// type: 'bar',
// stack: '使用情况',
// data: [24, 25, 21, 21, 17, 18, 18, 10, 11, 12, 15, 10, 13, 9, 5],
// itemStyle: {
// normal: { color: '#FF8849' },
// },
// },
// {
// name: '严重问题',
// type: 'bar',
// stack: '使用情况',
// data: [4, 3, 6, 2, 6, 4, 4, 9, 8, 6, 2, 4, 0, 2, 4],
// itemStyle: {
// normal: { color: '#3FBB49' },
// },
// },
// ],
{
name: '一般问题',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
fontSiz: '15',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#308399',
},
{
offset: 0.5,
color: '#3a9eb9',
},
{
offset: 1,
color: '#308399',
},
]),
label: {
show: true,
position: 'insideRight',
//修改柱子内部的颜色放label里面
fontWeight: 700,
color: '#000000',
// 柱形图中文字的颜色居中
position: 'inside',
},
},
},
data: [24, 25, 21, 21, 17, 18, 18, 10, 11, 12, 15, 10, 13, 9, 5, 0, 0, 0],
// 设置柱状图大小
barWidth: 25,
},
{
name: '严重问题',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#a32f2c',
},
{
offset: 0.4,
color: '#c73c39',
},
{
offset: 1,
color: '#a32f2c',
},
]),
label: {
show: true,
position: 'insideRight',
//修改柱子内部的颜色放label里面
color: '#000000',
fontWeight: 700,
// 柱形图中文字的颜色居中
position: 'inside',
},
},
},
data: [4, 3, 6, 2, 6, 4, 4, 9, 8, 6, 2, 4, 0, 2, 4],
// 设置柱状图大小
barWidth: 25,
// 柱形的颜色是这里
// itemStyle: {
// normal: {
// color: '#b83633',
// },
// },
},
// {
// name: '熄火',
// type: 'bar',
// stack: '总量',
// itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
// data: [220, 182, 191, 234],
// },
// {
// name: '离线',
// type: 'bar',
// stack: '总量',
// itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
// data: [150, 212, 201, 154],
// },
],
})
},
drawPie() {
const pieGraph = echarts.init(document.getElementById('pieGraph'))
pieGraph.setOption({
title: {
// text: '某站点用户访问来源',
// subtext: '纯属虚构',
// x: 'center',
},
tooltip: {
trigger: 'item',
// formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical',
left: 'left',
data: [
'人员管理及到位\n8%',
'施工方案及交底\n20%',
'作业票管理\n3%',
'风险计划\n6%',
'分包管理\n1%',
'施工机只维护及使用\n10%',
'',
'安全工具只使用\n7%',
'安全文明施工\n12%',
'现场安全隐患\n24%',
'基建e安全\n4%',
'安全培训\n4%',
'其他数量\n1%',
],
},
series: [
{
name: '访问来源',
type: 'pie',
// 圆的大小
radius: '80%',
center: ['50%', '60%'],
label: {
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
},
},
data: [
{ value: 8, name: '人员管理及到位\n8%' },
{ value: 20, name: '施工方案及交底\n20%' },
{ value: 3, name: '作业票管理\n3%' },
{ value: 6, name: '风险计划\n6%' },
{ value: 1, name: '分包管理\n1%' },
{ value: 10, name: '施工机只维护及使用\n10%' },
{ value: '', name: '' },
{ value: 7, name: '安全工具只使用\n7%' },
{ value: 12, name: '安全文明施工\n12%' },
{ value: 24, name: '现场安全隐患\n24%' },
{ value: 4, name: '安全培训\n4%' },
{ value: 4, name: '基建e安全\n4%' },
{ value: 1, name: '其他数量\n1%' },
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
fontSize: '18px',
fontFamily: '微软雅黑',
color: ['#4f81bd', '#c0504d', '#9bbb59', '#8064a2', '#4bacc6', '#f79646', '#f79646', '#2c4d75', '#772c2a', '#5f7530', '#4d3b62', '#276a7c', '#b65708'],
},
],
})
},
drawPieer() {
const pieGraphTwo = echarts.init(document.getElementById('pieGraphTwo'))
pieGraphTwo.setOption({
title: {
// text: '某站点用户访问来源',
// subtext: '纯属虚构',
// x: 'center',
},
tooltip: {
trigger: 'item',
// formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical',
left: 'left',
data: [
'合同管理及质量终身责任制落实\n2%',
'策划方案,技术方案\n10%',
'原材料检验及报审\n16%',
'地基基础及沉降\n2%',
'土建工艺质量\n38%',
'钢结构施工\n9%',
'建筑电气及装饰装修\n3%',
'设备安装\n2%',
'电气工艺\n9%',
'组塔,架线及附件安装\n3%',
'质量逐级验收\n2%',
'其他问题\n2%',
'人员资格\n2%',
],
},
series: [
{
name: '访问来源',
type: 'pie',
// 圆的大小
radius: '80%',
center: ['50%', '60%'],
label: {
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
},
},
data: [
{ value: 2, name: '合同管理及质量终身责任制落实\n2%' },
{ value: 10, name: '策划方案,技术方案\n10%' },
{ value: 16, name: '原材料检验及报审\n16%' },
{ value: 2, name: '地基基础及沉降\n2%' },
{ value: 38, name: '土建工艺质量\n38%' },
{ value: 9, name: '钢结构施工\n9%' },
{ value: 3, name: '建筑电气及装饰装修\n3%' },
{ value: 2, name: '设备安装\n2%' },
{ value: 9, name: '电气工艺\n9%' },
{ value: 3, name: '组塔,架线及附件安装\n3%' },
{ value: 2, name: '质量逐级验收\n2%' },
{ value: 2, name: '其他问题\n2%' },
{ value: 2, name: '人员资格\n2%' },
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
fontSize: '18px',
fontFamily: '微软雅黑',
color: ['#cc3c39', '#94ba44', '#73529b', '#2d98b5', '#f48727', '#1d4575', '#791f1c', '#5d7a23', '#45305f', '#196e85', '#cb5100', '#6194d2', '#3b7bc8'],
},
],
})
},
},
}
</script>