當前位置：首頁 > 前端技术 > vue >内容正文

vue

echarts 样式配置 vue

發布時間：2025/4/14 vue 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 echarts 样式配置 vue 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? vue使用實例

<template>
<div style="width:100%;height:100%;" id="productStructureChart"></div>
</template>

<script>
import echarts from 'echarts';
export default {
name: 'productStructureChart',
data () {
return {
//
};
},
mounted () {
this.$nextTick(() => {
let visiteVolume = echarts.init(document.getElementById('productStructureChart'));
let xAxisData = [];
let data1 = [];
let data2 = [];
for (let i = 0; i < 20; i++) {
xAxisData.push('類目' + i);
data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
var colors = ['#5793f3', '#d14a61', '#675bba'];

const option = {
title : {
// text: '某站點用戶訪問來源',
// subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} (ozvdkddzhkzd%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['成品','半成品','原料','輔料','設備配件']
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'成品'},
{value:310, name:'半成品'},
{value:234, name:'原料'},
{value:135, name:'輔料'},
{value:1548, name:'設備配件'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};

visiteVolume.setOption(option);

window.addEventListener('resize', function () {
visiteVolume.resize();
});
});
}
};
</script>

? 坐標軸間距

grid: {
left: 90, //Y軸距離左邊的距離
right:60 ????//X軸距離右邊的距離
},

? 樣式設置

yAxis: {
type: 'value',
axisLine: {
???? ??color:'blur', //
lineStyle: {
type: 'solid',
color: 'red',//y軸的顏色
width:'11'//y坐標軸線的寬度
}
},
axisLabel: {
textStyle: {
color: 'red',//y坐標軸的刻度值的顏色

}
},
splitLine: { 分割線的顏色、類型：虛線和實線
show: true,
lineStyle:{
color:'#3e4555',
type:'solid'
}
}

},

折線的顏色 series: [
{
name:'上周',
type:'line',
stack: '總量',
itemStyle : {
normal : {
color:'#025f64', //圖例的icon圖標顏色
lineStyle:{
color:'#05b0c2' //折線的顏色
}
}
},
data:[120, 132, 101, 134, 90, 230, 210]
}
]
圖例的字體顏色 legend: {
data:['上周','當周'],
textStyle: {
color: '#a6bbcc'
}
},

右上角的工具欄 toolbox: {
feature: {
saveAsImage: {
show: true, //是否顯示該工具。
type:"png", //保存的圖片格式。支持 'png' 和 'jpeg'。
name:"pic1", //保存的文件名稱，默認使用 title.text 作為名稱
backgroundColor:"#ffffff", //保存的圖片背景色，默認使用 backgroundColor，如果backgroundColor不存在的話會取白色
title:"保存為圖片",
pixelRatio:1
}
}, ????iconStyle:{
???color:'#fff',
???normal:{
???color:'#fff',//背景顏色
???borderColor: 'red'//邊框顏色

???}
????}
},

圖例legend

legend: {
orient: 'horizontal', // horizontal-->水平 vertical-->垂直
x: 'center', //X軸居中
y: 'top',
data:['細紗擋車','細紗掛紗','細紗換紗','細紗擺管','細紗落紗'],
textStyle:{
color:'#a7b9cd'
}
},

刻度大小

min: 0,
max: 25000,
interval: 5000, yAxis: [
{
type: 'value',
name: '錠速',
min: 0,
max: 25000,
interval: 5000, //刻度間隔
axisLabel: {
formatter: '{value} m/min'
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff',//左邊線的顏色
width:'1'//坐標線的寬度
}
},splitLine: {
show: true,
lineStyle:{
color:'#3e4555',
type:'solid'
}
},
}, ]

坐標軸指示器

tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},

圖表距離兩側的距離

grid: {
x: 90,
x2: 66,
y2: 40
},

雙折線圖疊加的問題

series: [
{
name:'當周',
type:'line',
// stack: '總量', //y軸的值會疊加，注釋掉就不會疊加了
itemStyle : {
normal : {
color:'#03c4d5',
lineStyle:{
color:'#05b0c2'
}
}
},
data:[20857.84168, 21159.75663, 21590.5474, 22968.84356, 0, 0, 0]
},
{
name:'上周',
type:'line',
// stack: '總量', //y軸的值會疊加，注釋掉就不會疊加了
itemStyle : {
normal : {
color:'#025f64',
lineStyle:{
color:'#005d65'
}
}
},
data:[20172.67505, 21714.04182, 11356.07937, 22980.75812, 22908.63532, 22373.94958, 22366.32426]
},

雙y軸時，各圖表參照的y軸設置（yAxisIndex），從0開始

series: [
{
name:'錠速',
type:'line',
data:this.spindleSpeed,
yAxisIndex: 0, //0代表左邊的y軸
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff',//左邊線的顏色
width:'1'//坐標線的寬度
}
},
splitLine: {
show: true,
lineStyle:{
color:'red',
type:'solid'
}
},
itemStyle : {
normal : {
color:'#01C4D6',
lineStyle:{
color:'#01C4D6'
}
}
},
},
{
name:'定長',
type:'bar',
yAxisIndex: 1, //1代表右邊的y軸
data:this.spindleLength,
itemStyle : {
normal : {
color:'#C23531',
lineStyle:{
color:'#C23531'
}
}
},
}
]

轉載于:https://www.cnblogs.com/web-zqk/p/11091155.html

總結

以上是生活随笔為你收集整理的echarts 样式配置 vue的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：网络时间服务和chrony
下一篇： Vue 踩坑日志 - 有关路由传参的坑

vue

echarts 样式 配置 vue

總結

echarts 样式配置 vue