echarts環(huán)形圖折線圖橫向柱狀圖縱向柱狀圖封裝

/**

?* 橫向柱狀圖

?* @param {number} id

?* @param {number} _this

?*/

export function rangkingBar(id, _this, rankingYdata, rankingOptions, rankingOptionsPercent, gridRight = '105px') {

? let echarts2 = _this.$echarts.init(document.getElementById(id));

? // let echarts2 = _this.$echarts.init(_this.$refs[id]);

? let option = {

? ? color: ['#0697FF'],

? ? tooltip: {

? ? ? trigger: 'axis',

? ? ? axisPointer: {

? ? ? ? type: 'shadow'

? ? ? },

? ? ? backgroundColor: '#fff',

? ? ? textStyle: {

? ? ? ? color: '#333'

? ? ? },

? ? ? formatter: function (params) {

? ? ? ? let firstParams = params[0];

? ? ? ? return (

? ? ? ? ? firstParams.name +

? ? ? ? ? ' ' +

? ? ? ? ? '數(shù)量: ' +

? ? ? ? ? firstParams.data?.toLocaleString() +

? ? ? ? ? ' ' +

? ? ? ? ? '占比: ' +

? ? ? ? ? rankingOptionsPercent[firstParams.dataIndex]

? ? ? ? );

? ? ? }

? ? },

? ? grid: {

? ? ? top: '25px',

? ? ? left: 85,

? ? ? bottom: 0,

? ? ? right: gridRight

? ? },

? ? xAxis: [

? ? ? {

????????show: false

? ? ? }

yAxis: [

? ? ? {

? ? ? ? type: 'category',

? ? ? ? data: rankingYdata,

? ? ? ? splitLine: {

? ? ? ? ? show: false

? ? ? ? },

? ? ? ? axisLine: {

? ? ? ? ? // 隱藏Y軸

? ? ? ? ? show: false

? ? ? ? },

? ? ? ? axisTick: {

? ? ? ? ? // 隱藏刻度線

? ? ? ? ? show: false,

? ? ? ? ? alignWithLabel: true

? ? ? ? },

? ? ? ? axisLabel: {

? ? ? ? ? align: 'left',

? ? ? ? ? margin: 85,

? ? ? ? ? formatter: function(value, index) {

? ? ? ? ? ? ? // 如果標(biāo)簽長度超過4趴久，將剩余的文字替換為省略號(hào)

? ? ? ? ? ? ? if (value.length > 4) {

? ? ? ? ? ? ? ? ? return `{a|${(rankingOptions.length - index)}} ${value.slice(0, 4)}...`;

? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? return `{a|${(rankingOptions.length - index)}} ${value}`;

? ? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? lineHeight: 20,

? ? ? ? ? rich: {

? ? ? ? ? ? a: {

? ? ? ? ? ? ? color: '#FFFFFF',

? ? ? ? ? ? ? backgroundColor: '#0697FF',

? ? ? ? ? ? ? borderRadius: 16,

? ? ? ? ? ? ? width: 16,

? ? ? ? ? ? ? height: 16,

? ? ? ? ? ? ? align: 'center',

????????????verticalAlign: 'middle',

? ? ? ? ? ? ? fontSize: 12,

? ? ? ? ? ? ? lineHeight: 16

? ? ? ? ? ? }

?????????}

? ? ? ? }

? ? ? }

? ? ],

series: [

? ? ? {

? ? ? ? type: 'bar',

? ? ? ? data: rankingOptions,

? ? ? ? barWidth: 10,

? ? ? ? label: {

? ? ? ? ? position: 'right',

? ? ? ? ? show: true,

? ? ? ? ? color: '#333',

? ? ? ? ? formatter: function (params) {

? ? ? ? ? ? return `${rankingOptions[params.dataIndex]?.toLocaleString()} {a|${

? ? ? ? ? ? ? rankingOptionsPercent[params.dataIndex]

? ? ? ? ? ? }}`;

? ? ? ? ? },

? ? ? ? ? rich: {

? ? ? ? ? ? a: {

? ? ? ? ? ? ? color: '#2B3DE0'

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? }

? ? ? }

? ? ]

};

echarts2.setOption(option);

? window.addEventListener('resize', () => {

? ? echarts2.resize();

? });

}

/**

?* 豎向柱狀圖

?* @param {number} id

?* @param {number} _this

?*/

export function drawbar(id, _this, operatorDistributionData, arr = ['電瓶車運(yùn)營商', '汽車運(yùn)營商', '換電柜運(yùn)營商', '充電柜運(yùn)營商', '門禁運(yùn)營商']) {

? let myChart1 = _this.$echarts.init(document.getElementById(id));

? ? let options1 = {

? ? ? color: ['#0A9AFF'],

? ? ? tooltip: {

? ? ? ? trigger: 'axis',

? ? ? ? axisPointer: {

? ? ? ? ? type: 'shadow'

? ? ? ? },

? ? ? ? backgroundColor: '#fff',

? ? ? ? textStyle: {

? ? ? ? ? color: '#333'

? ? ? ? },

? ? ? ? formatter: function (params) {

? ? ? ? ? let firstParams = params[0];

? ? ? ? ? return (

? ? ? ? ? ? firstParams.name +

? ? ? ? ? ? ' ' +

? ? ? ? ? ? '數(shù)量: ' +

? ? ? ? ? ? firstParams.data?.toLocaleString()

? ? ? ? ? );

? ? ? ? }

? ? ? },

? ? ? xAxis: {

? ? ? ? axisTick: {

? ? ? ? ? show: false

? ? ? ? },

? ? ? ? data: arr,

? ? ? ? axisLine: {

? ? ? ? ? lineStyle: {

? ? ? ? ? ? color: '#D6DCE0'

? ? ? ? ? }

? ? ? ? },

? ? ? ? axisLabel: {

? ? ? ? ? textStyle: {

? ? ? ? ? ? color: '#0F3F62'

? ? ? ? ? }

? ? ? ? }

? ? ? },

yAxis: [

? ? ? ? {

? ? ? ? ? type: 'value',

? ? ? ? ? axisLine: {

? ? ? ? ? ? show: false

? ? ? ? ? },

? ? ? ? ? axisTick: {

? ? ? ? ? ? show: false

? ? ? ? ? },

? ? ? ? ? splitLine: {

? ? ? ? ? ? show: true,

? ? ? ? ? ? lineStyle: {

? ? ? ? ? ? ? type: 'dashed'

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? }

? ? ? ],

series: [

? ? ? ? {

? ? ? ? ? data: operatorDistributionData,

? ? ? ? ? type: 'bar',

? ? ? ? ? showBackground: true,

? ? ? ? ? label: {

? ? ? ? ? ? show: true,

? ? ? ? ? ? position: 'top',

? ? ? ? ? ? color: '#333',

? ? ? ? ? ? formatter: function (params) {

? ? ? ? ? ? ? return params.data?.toLocaleString();

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? barWidth: '24px'

? ? ? ? }

? ? ? ],

grid: {

? ? ? ? left: '30px',

? ? ? ? right: '-30px',

? ? ? ? bottom: '36px',

? ? ? ? containLabel: true

? ? ? }

};

? ? myChart1.setOption(options1);

? ? window.addEventListener('resize', () => {

? ? ? myChart1.resize();

? ? });

}

/**

?* 橫向滾動(dòng)柱狀圖

?* @param {number} id

?* @param {number} _this

?*/

export function rangkingSrollBar(id, _this, rankingYdata, rankingOptions, rankingOptionsPercent) {

? let echarts2 = _this.$echarts.init(document.getElementById(id));

? let option = {

? ? color: ['#0697FF'],

? ? tooltip: {

? ? ? trigger: 'axis',

? ? ? axisPointer: {

? ? ? ? type: 'shadow'

? ? ? },

? ? ? backgroundColor: '#fff',

? ? ? textStyle: {

? ? ? ? color: '#333'

? ? ? },

? ? ? formatter: function (params) {

? ? ? ? let firstParams = params[0];

? ? ? ? return (

? ? ? ? ? firstParams.name +

? ? ? ? ? ' ' +

? ? ? ? ? '數(shù)量: ' +

? ? ? ? ? firstParams.data?.toLocaleString() +

? ? ? ? ? ' ' +

? ? ? ? ? '占比: ' +

? ? ? ? ? rankingOptionsPercent[firstParams.dataIndex]

? ? ? ? );

? ? ? }

? ? },

? ? grid: {

? ? ? top: '25px',

? ? ? left: 85,

? ? ? bottom: 0,

? ? ? right: '105px'

? ? },

? ? xAxis: [

? ? ? {

? ? ? ? show: false

? ? ? }

? ? ],

? ? yAxis: [

? ? ? {

? ? ? ? type: 'category',

? ? ? ? data: rankingYdata,

? ? ? ? splitLine: {

? ? ? ? ? show: false

? ? ? ? },

axisLine: {

? ? ? ? ? // 隱藏Y軸

? ? ? ? ? show: false

? ? ? ? },

? ? ? ? axisTick: {

? ? ? ? ? // 隱藏刻度線

? ? ? ? ? show: false,

? ? ? ? ? alignWithLabel: true

? ? ? ? },

axisLabel: {

? ? ? ? ? align: 'left',

? ? ? ? ? margin: 85,

? ? ? ? ? formatter: function(value, index) {

? ? ? ? ? ? ? const indexnum = rankingYdata.indexOf(value);

? ? ? ? ? ? ? // 如果標(biāo)簽長度超過4航瞭，將剩余的文字替換為省略號(hào)

? ? ? ? ? ? ? if (value.length > 4) {

? ? ? ? ? ? ? ? ? return `{a|${(rankingYdata.length - indexnum)}} ${value.slice(0, 4)}...`;

? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? return `{a|${(rankingYdata.length - indexnum)}} ${value}`;

? ? ? ? ? ? ? }

? ? ? ? ? },

lineHeight: 20,

? ? ? ? ? rich: {

? ? ? ? ? ? a: {

? ? ? ? ? ? ? color: '#FFFFFF',

? ? ? ? ? ? ? backgroundColor: '#0697FF',

? ? ? ? ? ? ? borderRadius: 10,

? ? ? ? ? ? ? width: 22,

? ? ? ? ? ? ? height: 14,

? ? ? ? ? ? ? align: 'center',

? ? ? ? ? ? ? verticalAlign: 'middle',

? ? ? ? ? ? ? fontSize: 12,

? ? ? ? ? ? ? lineHeight: 14

? ? ? ? ? ? }

? ? ? ? ? }

?????}

? ? ? }

? ? ],

series: [

? ? ? {

? ? ? ? type: 'bar',

? ? ? ? data: rankingOptions,

? ? ? ? barWidth: 10,

? ? ? ? label: {

? ? ? ? ? position: 'right',

? ? ? ? ? show: true,

? ? ? ? ? color: '#333',

? ? ? ? ? formatter: function (params) {

? ? ? ? ? ? return `${rankingOptions[params.dataIndex]?.toLocaleString()} {a|${

? ? ? ? ? ? ? rankingOptionsPercent[params.dataIndex]

? ? ? ? ? ? }}`;

? ? ? ? ? },

? ? ? ? ? rich: {

? ? ? ? ? ? a: {

? ? ? ? ? ? ? color: '#2B3DE0'

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? }

? ? ? }

? ? ],

dataZoom: [

? ? {

? ? ? type: 'inside',

? ? ? startValue: rankingYdata.length,

? ? ? endValue: rankingYdata.length - 5,

? ? ? minValueSpan: 4,

? ? ? maxValueSpan: 4,

? ? ? width: '10',

? ? ? height: '90%',

? ? ? yAxisIndex: [0], // 控制y軸滾動(dòng)

? ? ? fillerColor: 'rgba(154, 181, 215, 1)', // 滾動(dòng)條顏色

? ? ? borderColor: 'rgba(17, 100, 210, 0.12)',

? ? ? backgroundColor: '#cfcfcf', // 兩邊未選中的滑動(dòng)條區(qū)域的顏色

? ? ? handleSize: 0, // 兩邊手柄尺寸

? ? ? showDataShadow: false, // 是否顯示數(shù)據(jù)陰影默認(rèn)auto

? ? ? showDetail: false, // 拖拽時(shí)是否展示滾動(dòng)條兩側(cè)的文字

? ? ? top: '1%',

? ? ? right: '5'

? ? },

{

? ? ? show: true,

? ? ? yAxisIndex: 0,

? ? ? filterMode: 'empty',

? ? ? width: 15,

? ? ? height: '88%',

? ? ? showDataShadow: false,

? ? ? moveHandleStyle: {

? ? ? ? opacity: 0

? ? ? },

? ? ? handleSize: 0, // 兩邊手柄尺寸

? ? ? showDetail: false, // 拖拽時(shí)是否展示滾動(dòng)條兩側(cè)的文字

? ? ? fillerColor: 'rgba(154, 181, 215, 1)', // 滾動(dòng)條顏色

? ? ? borderColor: 'rgba(17, 100, 210, 0.12)',

? ? ? backgroundColor: '#cfcfcf', // 兩邊未選中的滑動(dòng)條區(qū)域的顏色

? ? ? left: '97%'

? ? }]

};

? echarts2.setOption(option);

? window.addEventListener('resize', () => {

? ? echarts2.resize();

? });

}

/**

?* 餅圖

?* @param {number} id

?* @param {number} _this

?*/

export function drawLine(id, _this) {

? let myChart1 = _this.$echarts.init(document.getElementById(id));

? let options1 = {

? ? series: [

? ? ? {

? ? ? ? name: 'Access From',

? ? ? ? type: 'pie',

? ? ? ? radius: ['70%', '90%'],

? ? ? ? avoidLabelOverlap: false,

? ? ? ? itemStyle: {

? ? ? ? ? borderColor: '#fff',

? ? ? ? ? borderWidth: 2

? ? ? ? },

? ? ? ? label: {

? ? ? ? ? show: false,

? ? ? ? ? position: 'center'

? ? ? ? },

? ? ? ? labelLine: {

? ? ? ? ? show: false

? ? ? ? },

? ? ? ? data: _this.opinionData,

? ? ? ? color: [

? ? ? ? ? new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? { offset: 0, color: '#158FFF' },

? ? ? ? ? ? { offset: 1, color: '#6398FF' }

? ? ? ? ? ]),

? ? ? ? ? new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? { offset: 0, color: '#a9e1fc' },

? ? ? ? ? ? { offset: 1, color: '#53bcf5' }

? ? ? ? ? ]),

? ? ? ? ? new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? { offset: 0, color:'#ffca59' },

{ offset: 1, color: '#ffca5a' }

? ? ? ? ? ]),

? ? ? ? ? new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? { offset: 0, color: '#FF927A' },

? ? ? ? ? ? { offset: 1, color: '#FFB79F' }

? ? ? ? ? ]),

? ? ? ? ? new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? { offset: 0, color: '#38C46A' },

? ? ? ? ? ? { offset: 1, color: '#61DA93' }

? ? ? ? ? ])

????????]

? ? ? }

? ? ]

? };

myChart1.setOption(options1);

? window.addEventListener('resize', () => {

? ? myChart1.resize();

? });

}

/**

?* 曲線圖

?* @param {number} id

?* @param {number} _this

?* @param {array} arr

?*/

export function trendLine(id, _this, arr = ['總數(shù)', '電瓶車', '汽車', '換電柜', '充電柜', '門禁']) {

? let echarts3 = _this.$echarts.init(document.getElementById(id));

? let option = {

? ? color: ['#ff313d', '#2d40e1', '#53bcf5', '#ffca59', '#ff927a', '#38c46a'],

? ? tooltip: {

? ? ? trigger: 'axis',

? ? ? position: function (pt, params, dom, rect, size) {

? ? ? ? dom.style.transform = 'translateZ(0)';

? ? ? ? // var obj = { top: 100 };

? ? ? ? // obj[['left', 'right'][+(pt[0] < size.viewSize[0] / 2)]] = 5;

? ? ? ? // return obj;

? ? ? ? // return [pt[0], '20%'];

? ? ? },

? ? ? formatter: function (params) {

? ? ? ? let firstParams = params[0];

? ? ? ? let str = `${firstParams.name} `;

? ? ? ? params.forEach((item, idx) => {

? ? ? ? ? str += `${item.marker}${item.seriesName}<span'>${item.data?.toLocaleString()}`;

? ? ? ? });

? ? ? ? return str;

? ? ? },

? ? ? transitionDuration: 0,

? ? ? backgroundColor: '#FFF',

? ? ? extraCssText: 'box-shadow: 0 0 8px 2px rgba(214,220,224,0.3);',

? ? ? textStyle: {

? ? ? ? color: '#0F3F62'

? ? ? }

? ? },

legend: {

? ? ? x: 'center',

? ? ? icon: 'rect',

? ? ? itemWidth: 14,

? ? ? itemHeight: 5,

? ? ? data: [

? ? ? ? {

? ? ? ? ? name: arr[0],

? ? ? ? ? itemStyle: {

? ? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? ? color: '#FF313D'

? ? ? ? ? ? ? },

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? ? color: '#FF9789'

? ? ? ? ? ? ? }

? ? ? ? ? ? ])

? ? ? ? ? }

? ? ? ? },

{

? ? ? ? ? name: arr[1],

? ? ? ? ? itemStyle: {

? ? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? ? color: '#2D40E1'

? ? ? ? ? ? ? },

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? ? color: '#6398FF'

? ? ? ? ? ? ? }

? ? ? ? ? ? ])

? ? ? ? ? }

? ? ? ? },

{

? ? ? ? ? name: arr[2],

? ? ? ? ? itemStyle: {

? ? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? ? color: '#53BcF5'

? ? ? ? ? ? ? },

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? ? color: '#A9E1FC'

? ? ? ? ? ? ? }

? ? ? ? ? ? ])

? ? ? ? ? }

? ? ? ? },

{

? ? ? ? ? name: arr[3],

? ? ? ? ? itemStyle: {

? ? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? ? color: '#ffca59'

? ? ? ? ? ? ? },

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? ? color: '#ffca5a'

? ? ? ? ? ? ? }

? ? ? ? ? ? ])

? ? ? ? ? }

? ? ? ? },

{

? ? ? ? ? name: arr[4],

? ? ? ? ? itemStyle: {

? ? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? ? color: '#FF927a'

? ? ? ? ? ? ? },

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? ? color: '#FFB79f'

? ? ? ? ? ? ? }

? ? ? ? ? ? ])

? ? ? ? ? }

? ? ? ? },

{

? ? ? ? ? name: arr[5],

? ? ? ? ? itemStyle: {

? ? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? ? color: '#38c46a'

? ? ? ? ? ? ? },

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? ? color: '#61da93'

? ? ? ? ? ? ? }

? ? ? ? ? ? ])

? ? ? ? ? }

? ? ? ? }

? ? ? ]

? ? },

grid: {

? ? ? left: '0',

? ? ? right: '3%',

? ? ? bottom: '3%',

? ? ? containLabel: true

? ? },

? ? xAxis: [

? ? ? {

? ? ? ? type: 'category',

? ? ? ? boundaryGap: false,

? ? ? ? data: _this.lineXDate

? ? ? }

? ? ],

yAxis: [

? ? ? {

? ? ? ? type: 'value',

? ? ? ? splitLine: {

? ? ? ? ? show: true,

? ? ? ? ? lineStyle: {

? ? ? ? ? ? type: 'dashed'

? ? ? ? ? }

? ? ? ? },

? ? ? ? axisLine: {

? ? ? ? ? show: false

? ? ? ? },

? ? ? ? axisTick: {

? ? ? ? ? show: false

? ? ? ? }

? ? ? }

? ? ],

series: [

? ? ? {

? ? ? ? name: arr[0],

? ? ? ? type: 'line',

? ? ? ? // stack: 'Total',

? ? ? ? smooth: true,

? ? ? ? lineStyle: {

? ? ? ? ? width: 2,

? ? ? ? ? color: '#FF313D'

? ? ? ? },

? ? ? ? showSymbol: false,

? ? ? ? areaStyle: {

? ? ? ? ? opacity: 0.8,

? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? color: 'rgba(255,49,61,0.1)'

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? color: 'rgba(255,49,61,0)'

? ? ? ? ? ? }

? ? ? ? ? ])

? ? ? ? },

? ? ? ? emphasis: {

? ? ? ? ? focus: 'series'

? ? ? ? },

? ? ? ? data: _this.lineYTotailDate

? ? ? },

{

? ? ? ? name: arr[1],

? ? ? ? type: 'line',

? ? ? ? // stack: 'Total',

? ? ? ? smooth: true,

? ? ? ? lineStyle: {

? ? ? ? ? width: 2,

? ? ? ? ? color: '#2D40E1'

? ? ? ? },

? ? ? ? showSymbol: false,

? ? ? ? areaStyle: {

? ? ? ? ? opacity: 0.8,

? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? color: 'rgba(45,64,225,0.1)'

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? color: 'rgba(45,64,225,0)'

? ? ? ? ? ? }

? ? ? ? ? ])

? ? ? ? },

? ? ? ? emphasis: {

? ? ? ? ? focus: 'series'

? ? ? ? },

? ? ? ? data: _this.lineYBikeDate

? ? ? },

{

? ? ? ? name: arr[2],

? ? ? ? type: 'line',

? ? ? ? // stack: 'Total',

? ? ? ? smooth: true,

? ? ? ? lineStyle: {

? ? ? ? ? width: 2,

? ? ? ? ? color: '#53BcF5'

? ? ? ? },

? ? ? ? showSymbol: false,

? ? ? ? areaStyle: {

? ? ? ? ? opacity: 0.8,

? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? color: 'rgba(83,188,245,0.1)'

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? color: 'rgba(83,188,245,0)'

? ? ? ? ? ? }

? ? ? ? ? ])

? ? ? ? },

? ? ? ? emphasis: {

? ? ? ? ? focus: 'series'

? ? ? ? },

? ? ? ? data: _this.lineYCarDate

? ? ? },

{

? ? ? ? name: arr[3],

? ? ? ? type: 'line',

? ? ? ? // stack: 'Total',

? ? ? ? smooth: true,

? ? ? ? lineStyle: {

? ? ? ? ? width: 2,

? ? ? ? ? color: '#ffca59'

? ? ? ? },

? ? ? ? showSymbol: false,

? ? ? ? areaStyle: {

? ? ? ? ? opacity: 0.8,

? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? color: 'rgba(255,202,89,0.1)'

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? color: 'rgba(255,202,89,0)'

? ? ? ? ? ? }

? ? ? ? ? ])

? ? ? ? },

? ? ? ? emphasis: {

? ? ? ? ? focus: 'series'

? ? ? ? },

? ? ? ? data: _this.lineYExchangeCabinetDate

? ? ? },

{

? ? ? ? name: arr[4],

? ? ? ? type: 'line',

? ? ? ? // stack: 'Total',

? ? ? ? smooth: true,

? ? ? ? lineStyle: {

? ? ? ? ? width: 2,

? ? ? ? ? color: '#FF927a'

? ? ? ? },

? ? ? ? showSymbol: false,

? ? ? ? label: {

? ? ? ? ? show: true,

? ? ? ? ? position: 'top'

? ? ? ? },

? ? ? ? areaStyle: {

? ? ? ? ? opacity: 0.8,

? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? color: 'rgba(255,146,122,0.1)'

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? color: 'rgba(255,146,122,0)'

? ? ? ? ? ? }

? ? ? ? ? ])

? ? ? ? },

? ? ? ? emphasis: {

? ? ? ? ? focus: 'series'

? ? ? ? },

? ? ? ? data: _this.lineYChargeCabinetDate

? ? ? },

{

? ? ? ? name: arr[5],

? ? ? ? type: 'line',

? ? ? ? // stack: 'Total',

? ? ? ? smooth: true,

? ? ? ? lineStyle: {

? ? ? ? ? width: 2,

? ? ? ? ? color: '#38c46a'

? ? ? ? },

? ? ? ? showSymbol: false,

? ? ? ? label: {

? ? ? ? ? show: true,

? ? ? ? ? position: 'top'

? ? ? ? },

? ? ? ? areaStyle: {

? ? ? ? ? opacity: 0.8,

? ? ? ? ? color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? color: 'rgba(56,196,106,0.1)'

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? offset: 0.8,

? ? ? ? ? ? ? color: 'rgba(56,196,106,0)'

? ? ? ? ? ? }

? ? ? ? ? ])

? ? ? ? },

? ? ? ? emphasis: {

? ? ? ? ? focus: 'series'

? ? ? ? },

? ? ? ? data: _this.lineYEntranceGuardDate

? ? ? }

? ? ],

dataZoom: [

? ? ? {

? ? ? ? type: 'slider'

? ? ? }

? ? ]

? };

? echarts3.setOption(option);

? window.addEventListener('resize', () => {

? ? echarts3.resize();

? });

}

ps：以上橫向柱狀圖場(chǎng)景適用于y軸有多個(gè)值且柱狀圖后有多個(gè)數(shù)據(jù)展示

折線圖時(shí)間計(jì)算方法:

import moment from 'moment';

/**

?* @param {object} value

?* @param {string} type 枚舉趨勢(shì)圖 type為trend

?* @param {Function} callback

?*/

export function getParamsData(value, type, callback) {

? ? let todayDate = moment().subtract(1, 'days').format('YYYY-MM-DD');

? ? let startDate = moment().subtract(31, 'days').format('YYYY-MM-DD');

? ? if (type === 'trend') {

? ? ? if (value && Object.keys(value).length) {

? ? ? ? if (value.dateRange) {

? ? ? ? ? ? let startDateRange = moment(value.dateRange[0]).format('YYYY-MM-DD');

? ? ? ? ? ? let endDateRange = moment(value.dateRange[1]).format('YYYY-MM-DD');

? ? ? ? ? ? // todo 判斷多年烹困，取最近一年，暫時(shí)不處理

? ? ? ? ? ? // let lastYearDate = moment(value.dateRange[1]).subtract(1, 'year');

? ? ? ? ? ? // let lastYearDateRange = moment(value.dateRange[1]).subtract(1, 'year').format('YYYY-MM-DD');

? ? ? ? ? ? // if (moment(value.dateRange[0]) < lastYearDate) {

? ? ? ? ? ? //? ? ?return { ...value, dateRange: `${lastYearDateRange} ~ ${endDateRange}闲询；

} else {

return { ...value, dateRange: undefined };

? ? ? ? }

} else {

? ? ? ? return {};

? ? ? }

? ? }

};

最后編輯于：2024.05.04 14:00:57

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市风科，隨后出現(xiàn)的幾起案子丛版，更是在濱河造成了極大的恐慌，老刑警劉巖汹来，帶你破解...
沈念sama閱讀 211,884評(píng)論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件续膳，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡收班，警方通過查閱死者的電腦和手機(jī)坟岔，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,347評(píng)論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來摔桦，“玉大人社付，你說我怎么就攤上這事×诟” “怎么了鸥咖？”我有些...
開封第一講書人閱讀 157,435評(píng)論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長赊豌。經(jīng)常有香客問我扛或，道長，這世上最難降的妖魔是什么碘饼？我笑而不...
開封第一講書人閱讀 56,509評(píng)論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任熙兔，我火速辦了婚禮，結(jié)果婚禮上艾恼，老公的妹妹穿的比我還像新娘住涉。我一直安慰自己，他們只是感情好钠绍，可當(dāng)我...
茶點(diǎn)故事閱讀 65,611評(píng)論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布舆声。她就那樣靜靜地躺著，像睡著了一般柳爽。火紅的嫁衣襯著肌膚如雪媳握。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,837評(píng)論 1贊 290
城市分裂傳說
那天磷脯，我揣著相機(jī)與錄音蛾找，去河邊找鬼。笑死赵誓，一個(gè)胖子當(dāng)著我的面吹牛打毛，可吹牛的內(nèi)容都是我干的柿赊。我是一名探鬼主播，決...
沈念sama閱讀 38,987評(píng)論 3贊 408
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼幻枉，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼碰声！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起熬甫，我...
開封第一講書人閱讀 37,730評(píng)論 0贊 267
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤胰挑，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后罗珍，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體洽腺，經(jīng)...
沈念sama閱讀 44,194評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,525評(píng)論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年覆旱，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片核无。...
茶點(diǎn)故事閱讀 38,664評(píng)論 1贊 340
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡扣唱，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出团南，到底是詐尸還是另有隱情噪沙，我是刑警寧澤，帶...
沈念sama閱讀 34,334評(píng)論 4贊 330
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布吐根，位于F島的核電站正歼，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏拷橘。R本人自食惡果不足惜局义，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,944評(píng)論 3贊 313
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望冗疮。院中可真熱鬧萄唇，春花似錦、人聲如沸术幔。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,764評(píng)論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽诅挑。三九已至四敞，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間拔妥，已是汗流浹背忿危。一陣腳步聲響...
開封第一講書人閱讀 31,997評(píng)論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留毒嫡，地道東北人癌蚁。一個(gè)月前我還...
沈念sama閱讀 46,389評(píng)論 2贊 360
代替公主和親
正文我出身青樓幻梯，卻偏偏與公主長得像，于是被迫代替她去往敵國和親努释。傳聞我的和親對(duì)象是個(gè)殘疾皇子碘梢，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,554評(píng)論 2贊 349

echarts環(huán)形圖 折線圖 橫向柱狀圖 縱向柱狀圖封裝

ps：以上橫向柱狀圖場(chǎng)景適用于y軸有多個(gè)值 且柱狀圖后有多個(gè)數(shù)據(jù)展示

折線圖時(shí)間計(jì)算方法:

推薦閱讀更多精彩內(nèi)容

echarts環(huán)形圖折線圖橫向柱狀圖縱向柱狀圖封裝

ps：以上橫向柱狀圖場(chǎng)景適用于y軸有多個(gè)值且柱狀圖后有多個(gè)數(shù)據(jù)展示