129 lines
3.9 KiB
Vue
129 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<v-chart :option="chartOptions" style="height: 500; width: 100%" lazy></v-chart>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import * as echarts from "echarts/core";
|
|
//
|
|
import { use } from "echarts/core";
|
|
import { LineChart } from "echarts/charts";
|
|
import {
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
ToolboxComponent,
|
|
GridComponent,
|
|
} from "echarts/components";
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
|
|
use([
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
ToolboxComponent,
|
|
GridComponent,
|
|
LineChart,
|
|
CanvasRenderer,
|
|
]);
|
|
|
|
/**
|
|
* @vue-data {Object} [chartOptions={}] - تنظیمات نمودار
|
|
* @vue-data {Object} title - تنظیمات عنوان نمودار
|
|
* @vue-data {String} title.text - متن عنوان نمودار
|
|
* @vue-data {Object} tooltip - تنظیمات ابزارک راهنما
|
|
* @vue-data {String} tooltip.trigger - ماهیت مقدار ابزارک راهنما
|
|
* @vue-data {Object} legend - تنظیمات افسانه
|
|
* @vue-data {Array} legend.data - داده‌های افسانه
|
|
* @vue-data {Object} grid - تنظیمات شبکه
|
|
* @vue-data {String} grid.left - موقعیت افقی شبکه
|
|
* @vue-data {String} grid.right - موقعیت افقی شبکه
|
|
* @vue-data {String} grid.bottom - موقعیت عمودی شبکه
|
|
* @vue-data {Boolean} grid.containLabel - محتوای شبکه حاوی برچسب‌ها باشد یا خیر
|
|
* @vue-data {Object} toolbox - ابزارهای جعبه ابزار
|
|
* @vue-data {Object} toolbox.feature - ویژگی‌های جعبه ابزار
|
|
* @vue-data {Object} toolbox.feature.saveAsImage - ذخیره به عنوان تصویر
|
|
* @vue-data {Object} xAxis - محور افقی (x)
|
|
* @vue-data {String} xAxis.type - نوع محور افقی (مثلاً 'category')
|
|
* @vue-data {Boolean} xAxis.boundaryGap - حفره مرزی محور افقی
|
|
* @vue-data {Array} xAxis.data - داده‌های محور افقی
|
|
* @vue-data {Object} yAxis - محور عمودی (y)
|
|
* @vue-data {String} yAxis.type - نوع محور عمودی (مثلاً 'value')
|
|
* @vue-data {Array} series - سریس های داده
|
|
* @vue-data {String} series.name - نام سریس
|
|
* @vue-data {String} series.type - نوع نمودار سریس(مثلاً 'line')
|
|
* @vue-data {String} series.stack - پشته نمودار سریس
|
|
* @vue-data {Array} series.data - داده‌های سریس
|
|
*/
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
chartOptions: {
|
|
title: {
|
|
text: "Stacked Line",
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
containLabel: true,
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "Email",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
},
|
|
{
|
|
name: "Union Ads",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: [220, 182, 191, 234, 290, 330, 310],
|
|
},
|
|
{
|
|
name: "Video Ads",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: [150, 232, 201, 154, 190, 330, 410],
|
|
},
|
|
{
|
|
name: "Direct",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: [320, 332, 301, 334, 390, 330, 320],
|
|
},
|
|
{
|
|
name: "Search Engine",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
};
|
|
</script>
|