1.npm intall [email protected]
2 quotes on the page:
import * as echarts from "echarts";3.ref in Dom
<div class="ui-chart" ref="chart2"></div>4. Chart part:
methods:{
chart2(){
var that = this
that.$nextTick(() => {
let myChart2 = echarts.init(that.$refs.chart2);
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: '{b0}<br>{a0}: {c0}',
},
// animation: true,
grid: {
bottom: '10%',
right: '3%',
left: '3%',
},
xAxis: {
data: ['乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称','乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称', '乡镇名称'],
axisLine: {
lineStyle: {
color: '#0a3e98'
}
},
axisTick: {
show:false,
lineStyle: {
color: '#BAE7FF',
},
},
splitLine: {
lineStyle: {
color: '#195384',
type: "dotted",
}
},
axisLabel: {
show: true,
margin: 14,
fontSize: 14,
color: '#fff',
},
},
yAxis: [
{
name: '',
nameTextStyle: {
fontSize: 11,
color: '#BAE7FF',
},
splitArea: {
show: false,
lineStyle: {
color: '#195384',
type: "solid",
}
},
type: 'value',
gridIndex: 0,
minInterval: 1,
// max: 100,
// interval: 25,
// splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: '#0a3e98',
type: "dotted",
}
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#0a3e98'
}
},
axisLabel: {
show: true,
margin: 14,
fontSize: 14,
color: '#fFF',
},
},
],
series: [
{
name:'项目数量',
type: 'bar',
barWidth: 22,
itemStyle: {
// @ts-ignore
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: '#1EE7E7',
},
{
offset: 1,
color: '#1890FF',
},
]),
},
},
data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
z: 10,
zlevel: 0,
},
{
// 分隔
type: 'pictorialBar',
itemStyle: {
normal: {
color: 'rgba(24, 27, 36, 0.63)',
},
},
symbolRepeat: 'fixed',
symbolMargin: 4,
symbol: 'rect',
symbolClip: true,
symbolSize: [22, 5],
symbolPosition: 'start',
symbolOffset: [1, 1],
data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
width: 2,
z: 0,
zlevel: 1,
},
{
name: '外框',
type: 'bar',
barGap: '-110%', // 设置外框粗细
barWidth: 22,
itemStyle: {
normal: {
color: 'transparent', // 填充色
// barBorderRadius: 0, //圆角半径
label: {
// 标签显示位置
show: false,
position: 'top', // insideTop 或者横向的 insideLeft
},
},
},
z: 0,
},
],
}
option && myChart2.setOption(option);
})
},
},
mounted(){
this.chart2()
}5. Chart effect:
