文章目录
- 一、安装Echarts
- 二、在main.js引入，以便于全局使用
- 三、绘制图表
-
- 柱状图
- 折线图
- 环形图、饼图
- 箱线柱状图
- 中国地图
- 仪表盘
随着大数据时代的来临，更多的数据要求可视化操作，图表的应用需求也不断提高。那么在Vue中该怎样使用图表呢？
一、安装Echarts
npm install echarts -S
二、在main.js引入，以便于全局使用
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
三、绘制图表
柱状图
<template>
<div>
<header>这是销量展示页面</header>
<div id="volume"></div>
<foottab></foottab>
</div>
</template>
<script>
//引入底部导航组件
import foottab from '../components/footTab.vue'
export default {
methods:{
drawBar(){
//基于准备好的dom，初始化echarts实例
let volume = this.$echarts.init(document.getElementById('volume'));
//绘制图表
volume.setOption({
title:{text:'商品销量'},
tooltip:{},
legend: {
data:['销量']
},
xAxis: {
data: ['衣服','裤子','帽子','鞋子','领带']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [40,30,20,60,10]
}]
})
}
},
mounted(){//模板或el对应的html渲染完成后再调用里面的方法
this.drawBar()
},
components: {
foottab
}
}
</script>
</script>
<style scoped>
#volume{
width:20em;
height:20em;
}
</style>
这样即完成了绘制，绘制效果如下：
折线图
line(){
//指定图标的配置和数据
var option = {
title:{
text:'集中度风险'
},
tooltip:{},
legend:{
data:['时间']
},
xAxis:[
{
name:'时间',
type:'category',
boundaryGap: false,//从起点开始
splitLine: {//隐藏网格线
"show": false
},
axisTick:{ //隐藏刻度线
"show":false
},
data:["201808","201809","201903","201906"]
}
],
yAxis:{
name:'%',
min: 'dataMin', //取数据在该轴上的最小值作为最小刻度
splitLine: {
"show": false
},
axisTick:{ //y轴刻度线
"show":false
}
},
series:[{
name:'访问量',
type:'line',
areaStyle: {
normal: {color: '#80ffc0'}
},
data:[51,54,48,53]
}]
};
let volume5 = this.$echarts.init(document.getElementById('volume5'));
volume5.setOption(option)
}
环形图、饼图
pie(){
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
},
{
name:'访问来源',
type:'pie',
radius: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:135, name:'直接访问'},
{value:210, name:'邮件营销'},
{value:260, name:'联盟广告'},
{value:100, name:'视频广告'},
{value:248, name:'搜索引擎'}
]
}
]
}
var volume6 = this.$echarts.init(document.getElementById('volume6'));
volume6.setOption(option)
}
箱线柱状图
let volume1 = this.$echarts.init(document.getElementById('volume1'));
volume1.setOption({
backgroundColor:'#0d2a43',
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
/*
legend: { //最上方显示
data:['中华人寿', '中华财险'],
color:'#ffffff'
},
*/
grid: {//内部距离
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'value',
splitLine: {show: false}, //去掉网格线
axisTick: {//决定是否显示坐标刻度
alignWithLabel: false,
show:false
},
axisLine:{//坐标字体颜色调整
show:false, //隐藏坐标线
lineStyle:{
color:'#ffffff',
width:2
}
}
}
],
yAxis : [
{
type : 'category',
silent: true,
splitLine: {show: false}, //去掉网格线
axisTick : {show: true},
splitLine: {show: false},
axisLine:{//坐标字体颜色调整
lineStyle:{
color:'#ffffff',
width:2
}
},
data : ['保险风险','市场风险','信用风险']
}
],
series : [
{
name:'中华人寿',
type:'bar',
barWidth: 30,
//stack: 'a',//决定两个是否重叠
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'left',//提示文字的位置
color:'#ffffff'
}
},
data:[-16.36]
},
{
name:'中华人寿',
type:'bar',
//barGap: "-100%",//包含关系
barWidth: 30,
//stack: 'b',
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'left',
color:'#ffffff'
}
},
data:[,-11.38]
},
{
name:'中华人寿',
type:'bar',
barWidth: 30,//设置宽度
//stack: 'c',
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'left',
color:'#ffffff'
}
},
data:[,,-12.2]
},
{
name:'中华人寿',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否叠加
//stack: 'a',//决定两个是否重叠
itemStyle:{
normal:{
color:'#f9f6c7'
}
},
label: {
normal: {
show: true,
position: 'left',
color:'black'
}
},
data:[-8]
},
{
name:'中华人寿',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否叠加
//stack: 'b',//决定两个是否重叠
itemStyle:{
normal:{
color:'#c3f8ee'
}
},
label: {
normal: {
show: true,
position: 'left',
color:'black'
}
},
data:[,-7.32]
},
{
name:'中华人寿',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否叠加
//stack: 'c',//决定两个是否重叠
itemStyle:{
normal:{
color:'#c3f8ee'
}
},
label: {
normal: {
show: true,
position: 'left',
color:'black'
}
},
data:[,,-8.13]
},
{
name:'中英人寿',
type:'bar',
barWidth: 30,
//stack: 'a',//决定两个是否重叠
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'#ffffff'
}
},
data:[20]
},
{
name:'中华财险',
type:'bar',
barWidth: 30,
//stack: 'b',
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'#ffffff'
}
},
data:[,14]
},
{
name:'中华财险',
type:'bar',
barWidth: 30,//设置宽度
//stack: 'c',
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'#ffffff'
}
},
data:[,,15]
},
{
name:'中华财险',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否叠加
//stack: 'a',//决定两个是否重叠
itemStyle:{
normal:{
color:'#f9f6c7'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'black'
}
},
data:[10]
},
{
name:'中华财险',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否叠加
//stack: 'b',//决定两个是否重叠
itemStyle:{
normal:{
color:'#c3f8ee'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'black'
}
},
data:[,9]
},
{
name:'中华财险',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否叠加
//stack: 'c',//决定两个是否重叠
itemStyle:{
normal:{
color:'#c3f8ee'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'black'
}
},
data:[,,10]
},
]
})
中国地图
randomColor(){
var arr = []
for(var i = 0; i < 6; i++){
console.log(Math.round(Math.random()*this.colorArr.length))
arr.push(this.colorArr[Math.round(Math.random()*this.colorArr.length)])
}
return arr;
},
map2(){
var optionChinaMap = {
tooltip : {
trigger: 'item', //显示悬浮窗口
formatter:function(params){
//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
var res='合规处罚<br />';
//定义一个变量来保存series数据系列
var myseries=optionChinaMap.series;
//循环遍历series数据系列
for(var i=0;i<myseries.length;i++){
//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
for(var k=0;k<myseries[i].data.length;k++){
//console.log(myseries[i].data[k].name);
//如果data数据中的name和地区名称一样
if(myseries[i].data[k].name==params.name){
//将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
res+=myseries[i].name+':'+myseries[i].data[k].value+'<br />';
}
}
}
//返回res
//console.log(res);
return res;
},
},
legend: {
orient: 'vertical',//图例的排列方向
textStyle: {color:'#fff'},
x:'left',//图例的位置
y:'20',
data:['中国地图']
},
visualMap: {//颜色的设置 dataRange
textStyle: {color:'#000'},
x: 'left',
y: 'bottom',
splitList: [
{start: 1500},{start: 900, end: 1500},
{start: 310, end: 1000},{start: 200, end: 300},
{start: 50, end: 200},{start: 0, end: 50},
],
color: this.randomColor()
},
// roamController: {//控制地图的上下左右放大缩小
// show: true,
// x: 'right',
// mapTypeControl: {
// 'china': true
// }
// },
series : [
{
name: '地区',
type: 'map',
mapType: 'china',
zoom: 1.1,
layoutCenter:['50%','50%'],
roam: false,//是否开启鼠标缩放和平移漫游
itemStyle:{//地图区域的多边形 图形样式
normal:{//是图形在默认状态下的样式
label:{
show: true,
textStyle: {color: "rgb(249, 249, 249)"}
}
},
emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
label:{show:true},
}
},
top:"100",//组件距离容器的距离
data:[
{name: '北京',value: '北京' },{name: '天津',value: '天津' },
{name: '上海',value: '上海' },{name: '重庆',value: this.randomData() },
{name: '河北',value: this.randomData() },{name: '河南',value: this.randomData() },
{name: '云南',value: this.randomData() },{name: '辽宁',value: this.randomData() },
{name: '黑龙江',value: this.randomData() },{name: '湖南',value: this.randomData() },
{name: '安徽',value: this.randomData() },{name: '山东',value: this.randomData() },
{name: '新疆',value: this.randomData() },{name: '江苏',value: this.randomData() },
{name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },
{name: '湖北',value: this.randomData() },{name: '广西',value: this.randomData() },
{name: '甘肃',value: this.randomData() },{name: '山西',value: this.randomData() },
{name: '内蒙古',value: this.randomData() },{name: '陕西',value: this.randomData() },
{name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },
{name: '贵州',value: this.randomData() },{name: '广东',value: this.randomData() },
{name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },
{name: '四川',value: this.randomData() },{name: '宁夏',value: this.randomData() },
{name: '海南',value: this.randomData() },{name: '台湾',value: this.randomData() },
{name: '香港',value: this.randomData() },{name: '澳门',value: this.randomData() }
]
},
{
name: '事件次数',
type: 'map',
mapType: 'china',
zoom: 1.1,
layoutCenter:['50%','50%'],
roam: false,//是否开启鼠标缩放和平移漫游
showLegendSymbol : false, //去掉小点
itemStyle:{//地图区域的多边形 图形样式
normal:{//是图形在默认状态下的样式
label:{
show: true,
textStyle: {color: "rgb(249, 249, 249)"}
}
},
emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
label:{show:true},
}
},
top:"100",//组件距离容器的距离
data:[
{name: '北京',value: '1次' },{name: '天津',value: this.randomData() },
{name: '上海',value: this.randomData() },{name: '重庆',value: this.randomData() },
{name: '河北',value: this.randomData() },{name: '河南',value: this.randomData() },
{name: '云南',value: this.randomData() },{name: '辽宁',value: this.randomData() },
{name: '黑龙江',value: this.randomData() },{name: '湖南',value: this.randomData() },
{name: '安徽',value: this.randomData() },{name: '山东',value: this.randomData() },
{name: '新疆',value: this.randomData() },{name: '江苏',value: this.randomData() },
{name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },
{name: '湖北',value: this.randomData() },{name: '广西',value: this.randomData() },
{name: '甘肃',value: this.randomData() },{name: '山西',value: this.randomData() },
{name: '内蒙古',value: this.randomData() },{name: '陕西',value: this.randomData() },
{name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },
{name: '贵州',value: this.randomData() },{name: '广东',value: this.randomData() },
{name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },
{name: '四川',value: this.randomData() },{name: '宁夏',value: this.randomData() },
{name: '海南',value: this.randomData() },{name: '台湾',value: this.randomData() },
{name: '香港',value: this.randomData() },{name: '澳门',value: this.randomData() }
]
},
{
name: '处罚金额',
type: 'map',
mapType: 'china',
zoom: 1.1,
layoutCenter:['50%','50%'],
roam: false,//是否开启鼠标缩放和平移漫游
showLegendSymbol : false,
itemStyle:{//地图区域的多边形 图形样式
normal:{//是图形在默认状态下的样式
label:{
show: true,
textStyle: {color: "rgb(249, 249, 249)"}
}
},
emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
label:{show:true},
}
},
top:"100",//组件距离容器的距离
data:[
{name: '北京',value: '30万' },{name: '天津',value: this.randomData() },
{name: '上海',value: this.randomData() },{name: '重庆',value: this.randomData() },
{name: '河北',value: this.randomData() },{name: '河南',value: this.randomData() },
{name: '云南',value: this.randomData() },{name: '辽宁',value: this.randomData() },
{name: '黑龙江',value: this.randomData() },{name: '湖南',value: this.randomData() },
{name: '安徽',value: this.randomData() },{name: '山东',value: this.randomData() },
{name: '新疆',value: this.randomData() },{name: '江苏',value: this.randomData() },
{name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },
{name: '湖北',value: this.randomData() },{name: '广西',value: this.randomData() },
{name: '甘肃',value: this.randomData() },{name: '山西',value: this.randomData() },
{name: '内蒙古',value: this.randomData() },{name: '陕西',value: this.randomData() },
{name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },
{name: '贵州',value: this.randomData() },{name: '广东',value: this.randomData() },
{name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },
{name: '四川',value: this.randomData() },{name: '宁夏',value: this.randomData() },
{name: '海南',value: this.randomData() },{name: '台湾',value: this.randomData() },
{name: '香港',value: this.randomData() },{name: '澳门',value: this.randomData() }
]
}
]
};
let volume3 = this.$echarts.init(document.getElementById('volume3'));
var that = this
volume3.setOption(optionChinaMap)
/*
this.timer = setInterval(function(){
optionChinaMap.visualMap.color = that.randomColor()
volume3.setOption(optionChinaMap)
},2000)
*/
}
仪表盘
chart(){
var colorTemplate1 = [[0.2, "rgba(255,0,0,0.8)"], [0.8, "rgba(0,255,255,0.8)"], [1, "rgba(0,255,0,0.8)"]];
var data1 = [{
name: "",
value: 65
}];
// 指定图表的配置项和数据
var option = {
backgroundColor: "#000",
tooltip: { // 本系列特定的 tooltip 设定。
show: true,
trigger:'item',
formatter: "{b}：{c}%",
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
borderColor: "#333", // 提示框浮层的边框颜色。...
borderWidth: 0, // 提示框浮层的边框宽。...
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
textStyle: { // 提示框浮层的文本样式。...
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
},
},
series: [
{
name: "仪表盘1", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type: "gauge", // 系列类型
radius: "35%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
center: ["18%", "55%"], // 仪表盘位置(圆心坐标)
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
endAngle: -45, // 仪表盘结束角度,默认 -45
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
lineStyle: { // 仪表盘轴线样式。
color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
width: 5, //轴线宽度,默认 30。
shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜色。支持的格式同color。
}
},
splitLine: { // 分隔线样式。
show: true, // 是否显示分隔线,默认 true。
length: -25, // 分隔线线长。支持相对半径的百分比,默认 30。
lineStyle: { // 分隔线样式。
color: "#eee", //线的颜色,默认 #eee。
opacity: 0, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
width: 2, //线度,默认 2。
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜色。支持的格式同color。
}
},
axisTick: { // 刻度(线)样式。
show: true, // 是否显示刻度(线),默认 true。
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
length: 0, // 刻度线长。支持相对半径的百分比,默认 8。
lineStyle: { // 刻度线样式。
color: "#eee", //线的颜色,默认 #eee。
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
width: 1, //线度,默认 1。
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜色。支持的格式同color。
},
},
axisLabel: { // 刻度标签。
show: true, // 是否显示标签,默认 true。
distance: 5, // 标签与刻度线的距离,默认 5。
color: "#fff", // 文字的颜色,默认 #fff。
fontSize: 12, // 文字的字体大小,默认 5。
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
},
pointer: { // 仪表盘指针。
show: true, // 是否显示指针,默认 true。
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
width: 5, // 指针宽度,默认 8。
},
itemStyle: { // 仪表盘指针样式。
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", // 阴影颜色。支持的格式同color。
},
emphasis: { // 高亮的 仪表盘指针样式
itemStyle: {
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
}
},
title: { // 仪表盘标题。
show: true, // 是否显示标题,默认 true。
offsetCenter: [0,"20%"],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
color: "#fff", // 文字的颜色,默认 #333。
fontSize: 20, // 文字的字体大小,默认 15。
},
detail: { // 仪表盘详情，用于显示数据。
show: true, // 是否显示详情,默认 true。
offsetCenter: [0,"50%"],// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
color: "auto", // 文字的颜色,默认 auto。
fontSize: 30, // 文字的字体大小,默认 15。
formatter: "{value}%", // 格式化函数或者字符串
},
data: data1
},
{
name: "仪表盘",
type: "gauge", // 系列类型
radius: "45%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
center: ["18%", "55%"], // 仪表盘位置(圆心坐标)
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
endAngle: -45, // 仪表盘结束角度,默认 -45
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
lineStyle: { // 仪表盘轴线样式。
color: [[1,'gray']],
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
width: 2, //轴线宽度,默认 30。
shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜色。支持的格式同color。
}
},
splitLine: { // 分隔线样式。
show: false
},
axisTick: { // 刻度(线)样式。
show: false
},
axisLabel: { // 刻度标签。
show: false
},
pointer: { // 仪表盘指针。
show: false
},
title: { // 仪表盘标题。
show: false
},
detail: { // 仪表盘详情，用于显示数据。
show: false // 是否显示详情,默认 true。
},
data: [{name:'',value:''}]
}
]
};
let volume4 = this.$echarts.init(document.getElementById('volume4'));
volume4.setOption(option)
}