封装渲染函数，修改所有图表组件
This commit is contained in:
ldz
@@ -1,18 +1,18 @@
|
||||
## 一、项目描述
|
||||
|
||||
- [**React 版本请点击这里查看，全新界面超级好看！！！(o ﾟ v ﾟ)ノ**](https://gitee.com/MTrun/react-big-screen)
|
||||
- 一个基于 vue、datav、Echart 框架的 " **数据大屏项目** "，通过 vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。
|
||||
- 一个基于 Vue、Datav、Echart 框架的 " **数据大屏项目** "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。
|
||||
- 项目需要全屏展示（按 F11）。
|
||||
- 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用**按需引入**。
|
||||
- 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 **按需引入**。
|
||||
- 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
|
||||
- 项目环境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。
|
||||
- 项目环境：Vue-cli-3.0、Webpack-4.0、Npm-6.13、Node-v12.16。
|
||||
- 请拉取 master 分支的代码，其余是开发分支。
|
||||
|
||||
友情链接：
|
||||
|
||||
1. [Vue 官方文档](https://cn.vuejs.org/v2/guide/instance.html)
|
||||
2. [DataV 官方文档](http://datav.jiaminghi.com/guide/)
|
||||
3. [echarts 实例](https://echarts.apache.org/examples/zh/index.html)，[echarts API文档](https://echarts.apache.org/zh/api.html#echarts)
|
||||
3. [echarts 实例](https://echarts.apache.org/examples/zh/index.html)，[echarts API 文档](https://echarts.apache.org/zh/api.html#echarts)
|
||||
4. [项目 gitee 地址（国内速度快）](https://gitee.com/MTrun/big-screen-vue-datav)
|
||||
|
||||
项目展示
|
||||
@@ -21,88 +21,90 @@
|
||||
## 二、主要文件介绍
|
||||
|
||||
| 文件 | 作用/功能 |
|
||||
| ------------------- | --------------------------------------------------- |
|
||||
| main.js | 主目录文件，引入Echart/DataV等文件 |
|
||||
| ------------------- | --------------------------------------------------------------------- |
|
||||
| main.js | 主目录文件，引入 Echart/DataV 等文件 |
|
||||
| utils | 工具函数与 mixins 函数等 |
|
||||
| views/ index.vue | 项目主结构 |
|
||||
| views/其余文件 | 界面各个区域组件（按照位置来命名）ajax 接口请求位置 |
|
||||
| views/其余文件 | 界面各个区域组件（按照位置来命名） |
|
||||
| assets | 静态资源目录，放置 logo 与背景图片 |
|
||||
| assets / style.scss | 通用 CSS 文件，全局项目快捷样式调节 |
|
||||
| assets / index.scss | Index 界面的 CSS 文件 |
|
||||
| components/echart | 所有 echart 图表（按照位置来命名） |
|
||||
| common/flexible.js | flexible 插件代码（适配屏幕尺寸，定制化修改） |
|
||||
| common/... | 全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改） |
|
||||
|
||||
## 三、使用介绍
|
||||
|
||||
### 启动项目
|
||||
|
||||
需要提前安装好`nodejs`与`npm`,下载项目后在项目主目录下运行`npm/cnpm install`拉取依赖包，然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。
|
||||
需要提前安装好 `nodejs` 与 `npm`,下载项目后在项目主目录下运行 `npm/cnpm install` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV 框架的依赖，输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。
|
||||
|
||||
### 请求数据
|
||||
### 封装组件渲染图表
|
||||
|
||||
现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置，在 views/xx.vue 文件里进行前后端数据请求。
|
||||
所有的 ECharts 图表都是基于 `common/echart/index.vue` 封装组件创建的，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。在监听窗口小大的模块，使用了节流函数来节约浏览器性能。
|
||||
|
||||
- axios 的 main.js 配置参考范例（因人而异）
|
||||
项目配置了默认的 ECharts 图表样式，文件地址：`common/echart/theme.json`。
|
||||
|
||||
```js
|
||||
import axios from 'axios';
|
||||
封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加/删除。
|
||||
|
||||
//把方法放到vue的原型上，这样就可以全局使用了
|
||||
Vue.prototype.$http = axios.create({
|
||||
//设置20秒超时时间
|
||||
timeout: 20000,
|
||||
baseURL: 'http://172.0.0.1:80080', //这里写后端地址
|
||||
});
|
||||
```
|
||||
|
||||
- 在 vue 页面中调用 axios 方法并通过 props 传给 echarts 图表子组件
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
ListDataSelf:[]
|
||||
},
|
||||
mounted() {
|
||||
this.fetchList(); //获取数据
|
||||
},
|
||||
methods: {
|
||||
async fetchList(){
|
||||
const { code, listData } = await this.$http.get("xx/xx/xx");
|
||||
if(code === 200){
|
||||
this.ListDataSelf = listData;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
参数名称 | 类型 | 作用/功能 |
|
||||
| -------------------| --------- | ------------------------------|
|
||||
| id | String | 唯一 id，渲染图表的节点 |
|
||||
| className | String | class样式名称 |
|
||||
| options | Object | ECharts 配置 |
|
||||
| height | String | 图表高度 |
|
||||
| width | String | 图表宽度 |
|
||||
|
||||
### 动态渲染图表
|
||||
|
||||
在`components/echart`下的文件，比如`drawPie()`是渲染函数，`echartData`是需要动态渲染的数据，当外界通过`props`传入新数据，我们可以使用`watch()`方法去监听，一但数据变化就调用`this.drawPie()`并触发内部的`.setOption`函数，重新渲染一次图表。
|
||||
动态渲染图表案例为 `components` 目录下各个图表组件，index 文件负责数据获取和处理，chart 文件负责监听和数据渲染。
|
||||
|
||||
```js
|
||||
//这里是子组件内部
|
||||
chart 文件的主要逻辑为：
|
||||
|
||||
props: ["listData"],
|
||||
watch: {
|
||||
listData(newValue) {
|
||||
this.echartData= newValue;
|
||||
this.drawPie();
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<Echart :options="options" id="id" height="height" width="width" ></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入封装组件
|
||||
import Echart from '@/common/echart'
|
||||
export default {
|
||||
// 定义配置数据
|
||||
data(){ return { options: {}}},
|
||||
// 声明组件
|
||||
components: { Echart},
|
||||
// 接收数据
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
drawPie() {
|
||||
.....
|
||||
'渲染节点名称'.setOption(option);
|
||||
// 进行监听，也可以使用 computed 计算属性实现此功能
|
||||
watch: {
|
||||
cdata: {
|
||||
handler (newData) {
|
||||
this.options ={
|
||||
// 这里编写 ECharts 配置
|
||||
}
|
||||
},
|
||||
// 立即监听
|
||||
immediate: true,
|
||||
// 深度监听
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### 复用图表组件
|
||||
|
||||
因为 Echart 图表是根据`id/class`去获取 Dom 节点并进行渲染的，所以我们只要传入唯一的 id 值与需要的数据就可以进行复用。如中间部分的`任务通过率与任务达标率`组件就是采用复用的方式。
|
||||
复用图表组件案例为中间部分的 `任务通过率与任务达标率` 模块，两个图表类似，区别在于颜色和主要渲染数据。只需要传入对应的唯一 id 和样式，然后在复用的组件 `components/echart/center/centerChartRate` 里进行接收并在对应位置赋值即可。
|
||||
|
||||
如：在调用处`views/center.vue`里去定义好数据并传入组件（项目里的所有`id`都不能重复!!!）
|
||||
如：在调用处 `views/center.vue` 里去定义好数据并传入组件（项目里的所有 `id` 都不能重复!!!）
|
||||
|
||||
```js
|
||||
//组件调用
|
||||
@@ -135,12 +137,10 @@ data() {
|
||||
}
|
||||
```
|
||||
|
||||
然后在复用的组件`components/echart/center/centerChartRate`里进行接收并在用到的地方赋值。
|
||||
|
||||
### 更换边框
|
||||
|
||||
边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
|
||||
如：
|
||||
边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
|
||||
如：
|
||||
|
||||
```html
|
||||
<dv-border-box-1></dv-border-box-1>
|
||||
@@ -150,15 +150,15 @@ data() {
|
||||
|
||||
### 更换图表
|
||||
|
||||
直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
|
||||
直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
|
||||
|
||||
### Mixins 注入的
|
||||
### Mixins 解决自适应适配功能
|
||||
|
||||
使用 mixins 注入解决了图表重复书写响应式适配的代码，如果要更换(新增)图形，需要将`echarts.init()`函数赋值给`this.chart`，然后 mixins 才会自动帮你注入响应式功能。
|
||||
使用 mixins 注入解决了界面大小变动图表自适应适配的功能，函数在 `utils/resizeMixins.js` 中，应用在 `common/echart/index.vue` 的封装渲染组件，主要是对 `this.chart` 进行了功能注入。
|
||||
|
||||
### 屏幕适配
|
||||
|
||||
本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，
|
||||
本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，
|
||||
|
||||
```js
|
||||
// flexible文件位置: `common/flexible.js`,修改部分如下
|
||||
@@ -177,13 +177,31 @@ function refreshRem() {
|
||||
}
|
||||
```
|
||||
|
||||
### 请求数据
|
||||
|
||||
现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置。
|
||||
|
||||
- axios 的 main.js 配置参考范例（因人而异）
|
||||
|
||||
```js
|
||||
import axios from 'axios';
|
||||
|
||||
//把方法放到vue的原型上，这样就可以全局使用了
|
||||
Vue.prototype.$http = axios.create({
|
||||
//设置20秒超时时间
|
||||
timeout: 20000,
|
||||
baseURL: 'http://172.0.0.1:80080', //这里写后端地址
|
||||
});
|
||||
```
|
||||
|
||||
## 四、更新情况
|
||||
|
||||
1. 增加了 Echart 组件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。
|
||||
2. 修复了头部右侧的图案条不对称的问题。
|
||||
3. 修复屏幕适配问题，更换了所有的尺寸单位，统一使用 rem。
|
||||
4. 使用 Mixins 注入图表响应式代码。
|
||||
5. vue-awesome 改成按需引入的方式
|
||||
5. vue-awesome 改成按需引入的方式。
|
||||
6. 封装渲染函数，抽离了数据使逻辑更加清晰。
|
||||
|
||||
## 五、其余
|
||||
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tdTheme from './theme.json' // 引入默认主题
|
||||
import echartMixins from "@/utils/resizeMixins";
|
||||
this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
|
||||
|
||||
export default {
|
||||
name: 'Echarts',
|
||||
name: 'echart',
|
||||
mixins: [echartMixins],
|
||||
props: {
|
||||
className: {
|
||||
@@ -28,30 +28,31 @@ export default {
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
default: ()=>({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
handler(options) {
|
||||
handler (options) {
|
||||
// 设置true清空echart缓存
|
||||
this.chart.setOption(options, true)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
mounted () {
|
||||
this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
initChart () {
|
||||
// 初始化echart
|
||||
this.chart = echarts.init(this.$el, 'tdTheme')
|
||||
this.chart = this.$echarts.init(this.$el, 'tdTheme')
|
||||
this.chart.setOption(this.options, true)
|
||||
}
|
||||
}
|
||||
@@ -1,266 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="bottomLeftChart" style="width:11.25rem;height:6.25rem;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echartMixins from "@/utils/resizeMixins";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
mixins: [echartMixins],
|
||||
mounted() {
|
||||
this.draw();
|
||||
},
|
||||
methods: {
|
||||
draw() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = this.$echarts.init(document.getElementById("bottomLeftChart"));
|
||||
// ----------------------------------------------------------------
|
||||
let category = [
|
||||
"市区",
|
||||
"万州",
|
||||
"江北",
|
||||
"南岸",
|
||||
"北碚",
|
||||
"綦南",
|
||||
"长寿",
|
||||
"永川",
|
||||
"璧山",
|
||||
"江津",
|
||||
"城口",
|
||||
"大足",
|
||||
"垫江",
|
||||
"丰都",
|
||||
"奉节",
|
||||
"合川",
|
||||
"江津区",
|
||||
"开州",
|
||||
"南川",
|
||||
"彭水",
|
||||
"黔江",
|
||||
"石柱",
|
||||
"铜梁",
|
||||
"潼南",
|
||||
"巫山",
|
||||
"巫溪",
|
||||
"武隆",
|
||||
"秀山",
|
||||
"酉阳",
|
||||
"云阳",
|
||||
"忠县",
|
||||
"川东",
|
||||
"检修"
|
||||
];
|
||||
let lineData = [
|
||||
18092,
|
||||
20728,
|
||||
24045,
|
||||
28348,
|
||||
32808,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
56061,
|
||||
62677,
|
||||
59521,
|
||||
67560,
|
||||
18092,
|
||||
20728,
|
||||
24045,
|
||||
28348,
|
||||
32808,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
50061,
|
||||
32677,
|
||||
49521,
|
||||
32808
|
||||
];
|
||||
let barData = [
|
||||
4600,
|
||||
5000,
|
||||
5500,
|
||||
6500,
|
||||
7500,
|
||||
8500,
|
||||
9900,
|
||||
12500,
|
||||
14000,
|
||||
21500,
|
||||
23200,
|
||||
24450,
|
||||
25250,
|
||||
33300,
|
||||
4600,
|
||||
5000,
|
||||
5500,
|
||||
6500,
|
||||
7500,
|
||||
8500,
|
||||
9900,
|
||||
22500,
|
||||
14000,
|
||||
21500,
|
||||
8500,
|
||||
9900,
|
||||
12500,
|
||||
14000,
|
||||
21500,
|
||||
23200,
|
||||
24450,
|
||||
25250,
|
||||
7500
|
||||
];
|
||||
let rateData = [];
|
||||
for (let i = 0; i < 33; i++) {
|
||||
let rate = barData[i] / lineData[i];
|
||||
rateData[i] = rate.toFixed(2);
|
||||
}
|
||||
|
||||
let option = {
|
||||
title: {
|
||||
text: "",
|
||||
x: "center",
|
||||
y: 0,
|
||||
textStyle: {
|
||||
color: "#B4B4B4",
|
||||
fontSize: 16,
|
||||
fontWeight: "normal"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(255,255,255,0.1)",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
show: true,
|
||||
backgroundColor: "#7B7DDC"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["已贯通", "计划贯通", "贯通率"],
|
||||
textStyle: {
|
||||
color: "#B4B4B4"
|
||||
},
|
||||
top: "0%"
|
||||
},
|
||||
grid: {
|
||||
x: "8%",
|
||||
width: "88%",
|
||||
y: "4%"
|
||||
},
|
||||
xAxis: {
|
||||
data: category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
}
|
||||
},
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "贯通率",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
showAllSymbol: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F02FC2"
|
||||
}
|
||||
},
|
||||
data: rateData
|
||||
},
|
||||
|
||||
{
|
||||
name: "已贯通",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#956FD4" },
|
||||
{ offset: 1, color: "#3EACE5" }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: barData
|
||||
},
|
||||
|
||||
{
|
||||
name: "计划贯通",
|
||||
type: "bar",
|
||||
barGap: "-100%",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(156,107,211,0.8)" },
|
||||
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
|
||||
{ offset: 1, color: "rgba(156,107,211,0.2)" }
|
||||
])
|
||||
}
|
||||
},
|
||||
z: -12,
|
||||
|
||||
data: lineData
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 年度开工率 -->
|
||||
<Echart
|
||||
:options="options"
|
||||
id="bottomLeftChart"
|
||||
height="6.25rem"
|
||||
width="100%"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '@/common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler (newData) {
|
||||
this.options = {
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(255,255,255,0.1)",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
show: true,
|
||||
backgroundColor: "#7B7DDC"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["已贯通", "计划贯通", "贯通率"],
|
||||
textStyle: {
|
||||
color: "#B4B4B4"
|
||||
},
|
||||
top: "0%"
|
||||
},
|
||||
grid: {
|
||||
x: "8%",
|
||||
width: "88%",
|
||||
y: "4%"
|
||||
},
|
||||
xAxis: {
|
||||
data: newData.category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
}
|
||||
},
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "贯通率",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
showAllSymbol: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F02FC2"
|
||||
}
|
||||
},
|
||||
data: newData.rateData
|
||||
},
|
||||
{
|
||||
name: "已贯通",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#956FD4" },
|
||||
{ offset: 1, color: "#3EACE5" }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: newData.barData
|
||||
},
|
||||
{
|
||||
name: "计划贯通",
|
||||
type: "bar",
|
||||
barGap: "-100%",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(156,107,211,0.8)" },
|
||||
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
|
||||
{ offset: 1, color: "rgba(156,107,211,0.2)" }
|
||||
])
|
||||
}
|
||||
},
|
||||
z: -12,
|
||||
data: newData.lineData
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cdata: {
|
||||
category: [
|
||||
"市区",
|
||||
"万州",
|
||||
"江北",
|
||||
"南岸",
|
||||
"北碚",
|
||||
"綦南",
|
||||
"长寿",
|
||||
"永川",
|
||||
"璧山",
|
||||
"江津",
|
||||
"城口",
|
||||
"大足",
|
||||
"垫江",
|
||||
"丰都",
|
||||
"奉节",
|
||||
"合川",
|
||||
"江津区",
|
||||
"开州",
|
||||
"南川",
|
||||
"彭水",
|
||||
"黔江",
|
||||
"石柱",
|
||||
"铜梁",
|
||||
"潼南",
|
||||
"巫山",
|
||||
"巫溪",
|
||||
"武隆",
|
||||
"秀山",
|
||||
"酉阳",
|
||||
"云阳",
|
||||
"忠县",
|
||||
"川东",
|
||||
"检修"
|
||||
],
|
||||
lineData: [
|
||||
18092,
|
||||
20728,
|
||||
24045,
|
||||
28348,
|
||||
32808,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
56061,
|
||||
62677,
|
||||
59521,
|
||||
67560,
|
||||
18092,
|
||||
20728,
|
||||
24045,
|
||||
28348,
|
||||
32808,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
50061,
|
||||
32677,
|
||||
49521,
|
||||
32808
|
||||
],
|
||||
barData: [
|
||||
4600,
|
||||
5000,
|
||||
5500,
|
||||
6500,
|
||||
7500,
|
||||
8500,
|
||||
9900,
|
||||
12500,
|
||||
14000,
|
||||
21500,
|
||||
23200,
|
||||
24450,
|
||||
25250,
|
||||
33300,
|
||||
4600,
|
||||
5000,
|
||||
5500,
|
||||
6500,
|
||||
7500,
|
||||
8500,
|
||||
9900,
|
||||
22500,
|
||||
14000,
|
||||
21500,
|
||||
8500,
|
||||
9900,
|
||||
12500,
|
||||
14000,
|
||||
21500,
|
||||
23200,
|
||||
24450,
|
||||
25250,
|
||||
7500
|
||||
],
|
||||
rateData: []
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
this.setData();
|
||||
},
|
||||
methods: {
|
||||
// 根据自己的业务情况修改
|
||||
setData () {
|
||||
for (let i = 0; i < this.cdata.barData.length -1; i++) {
|
||||
let rate = this.cdata.barData[i] / this.cdata.lineData[i];
|
||||
this.cdata.rateData.push(rate.toFixed(2));
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,403 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="bottomRightChart" style="width:11.25rem;height:6rem;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echartMixins from "@/utils/resizeMixins";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.draw();
|
||||
this.charTimg();
|
||||
},
|
||||
mixins: [echartMixins],
|
||||
methods: {
|
||||
charTimg() {
|
||||
setInterval(() => {
|
||||
this.draw();
|
||||
}, 6000);
|
||||
},
|
||||
draw() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = this.$echarts.init(document.getElementById("bottomRightChart"));
|
||||
// ----------------------------------------------------------------
|
||||
// 数据
|
||||
let dateBase = new Date();
|
||||
let year = dateBase.getFullYear();
|
||||
let dottedBase = +dateBase + 1000 * 3600 * 24;
|
||||
let weekCategory = [];
|
||||
|
||||
let radarData = [];
|
||||
let radarDataAvg = [];
|
||||
let maxData = 12000;
|
||||
let weekMaxData = [];
|
||||
let weekLineData = [];
|
||||
|
||||
// 周数据
|
||||
for (let i = 0; i < 7; i++) {
|
||||
// 日期
|
||||
var date = new Date((dottedBase -= 1000 * 3600 * 24));
|
||||
weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
|
||||
|
||||
// 折线图数据
|
||||
weekMaxData.push(maxData);
|
||||
var distance = Math.round(Math.random() * 11000 + 500);
|
||||
weekLineData.push(distance);
|
||||
|
||||
// 雷达图数据
|
||||
// 我的指标
|
||||
var averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
||||
var maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
||||
var hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
var radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
||||
radarData.unshift(radarDayData);
|
||||
|
||||
// 平均指标
|
||||
var distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
||||
var averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
||||
var maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
||||
var hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
var radarDayDataAvg = [
|
||||
distanceAvg,
|
||||
averageSpeedAvg,
|
||||
maxSpeedAvg,
|
||||
hourAvg
|
||||
];
|
||||
radarDataAvg.unshift(radarDayDataAvg);
|
||||
}
|
||||
|
||||
// 颜色设置
|
||||
let color = {
|
||||
linearYtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#f5b44d"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
linearGtoB: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#43dfa2"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
linearBtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#1c98e8"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
areaBtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(35,184,210,.2)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(35,184,210,0)"
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
let option = {
|
||||
title: {
|
||||
text: "",
|
||||
textStyle: {
|
||||
color: "#D3D6DD",
|
||||
fontSize: 24,
|
||||
fontWeight: "normal"
|
||||
},
|
||||
subtext: year + "/" + weekCategory[6],
|
||||
subtextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16
|
||||
},
|
||||
top: 50,
|
||||
left: 80
|
||||
},
|
||||
legend: {
|
||||
top: 120,
|
||||
left: 80,
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
data: ["平均指标", "我的指标"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
radar: {
|
||||
center: ["68%", "27%"],
|
||||
radius: "40%",
|
||||
name: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitNumber: 8,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: color.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: color.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1,
|
||||
shadowBlur: 25,
|
||||
shadowColor: "#000",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{
|
||||
name: "服务态度",
|
||||
max: maxData
|
||||
},
|
||||
{
|
||||
name: "产品质量",
|
||||
max: 10
|
||||
},
|
||||
{
|
||||
name: "任务效率",
|
||||
max: 12
|
||||
},
|
||||
{
|
||||
name: "售后保障",
|
||||
max: 3.5
|
||||
}
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
left: 90,
|
||||
right: 80,
|
||||
bottom: 40,
|
||||
top: "60%"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
position: "bottom",
|
||||
axisLine: true,
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12
|
||||
},
|
||||
data: weekCategory
|
||||
},
|
||||
// 下方Y轴
|
||||
yAxis: {
|
||||
name: "工单",
|
||||
nameLocation: "end",
|
||||
nameGap: 24,
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: 14
|
||||
},
|
||||
max: maxData,
|
||||
splitNumber: 4,
|
||||
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "radar",
|
||||
symbolSize: 0,
|
||||
data: [
|
||||
{
|
||||
value: radarDataAvg[6],
|
||||
name: "平均指标",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#f8d351"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: "#f8d351",
|
||||
shadowBlur: 25,
|
||||
shadowColor: "rgba(248,211,81,.3)",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: -10,
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: radarData[6],
|
||||
name: "我的指标",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#43dfa2"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: color.linearGtoB,
|
||||
shadowBlur: 15,
|
||||
shadowColor: "rgba(0,0,0,.2)",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5,
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color.linearBtoG,
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: color.areaBtoG
|
||||
}
|
||||
},
|
||||
data: weekLineData,
|
||||
lineSmooth: true,
|
||||
markLine: {
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
type: "average",
|
||||
name: "平均值"
|
||||
}
|
||||
],
|
||||
precision: 0,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: "平均值: \n {c}"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "rgba(248,211,81,.7)"
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
position: "top",
|
||||
formatter: "{c} m",
|
||||
backgroundColor: "rgba(28,152,232,.2)",
|
||||
padding: 6
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "占位背景",
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#000",
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
silent: true,
|
||||
barWidth: "50%",
|
||||
data: weekMaxData,
|
||||
animation: false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreLeft1Chart"
|
||||
height="6rem"
|
||||
width="100%"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '@/common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
// 定义颜色
|
||||
colorList: {
|
||||
linearYtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#f5b44d"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
linearGtoB: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#43dfa2"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
linearBtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#1c98e8"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
areaBtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(35,184,210,.2)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(35,184,210,0)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler (newData) {
|
||||
this.options = {
|
||||
title: {
|
||||
text: "",
|
||||
textStyle: {
|
||||
color: "#D3D6DD",
|
||||
fontSize: 24,
|
||||
fontWeight: "normal"
|
||||
},
|
||||
subtext: newData.year + "/" + newData.weekCategory[6],
|
||||
subtextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16
|
||||
},
|
||||
top: 50,
|
||||
left: 80
|
||||
},
|
||||
legend: {
|
||||
top: 120,
|
||||
left: 80,
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
data: ["平均指标", "我的指标"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
radar: {
|
||||
center: ["68%", "27%"],
|
||||
radius: "40%",
|
||||
name: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitNumber: 8,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: this.colorList.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: this.colorList.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1,
|
||||
shadowBlur: 25,
|
||||
shadowColor: "#000",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{
|
||||
name: "服务态度",
|
||||
max: newData.maxData
|
||||
},
|
||||
{
|
||||
name: "产品质量",
|
||||
max: 10
|
||||
},
|
||||
{
|
||||
name: "任务效率",
|
||||
max: 12
|
||||
},
|
||||
{
|
||||
name: "售后保障",
|
||||
max: 3.5
|
||||
}
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
left: 90,
|
||||
right: 80,
|
||||
bottom: 40,
|
||||
top: "60%"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
position: "bottom",
|
||||
axisLine: true,
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12
|
||||
},
|
||||
data: newData.weekCategory
|
||||
},
|
||||
// 下方Y轴
|
||||
yAxis: {
|
||||
name: "工单",
|
||||
nameLocation: "end",
|
||||
nameGap: 24,
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: 14
|
||||
},
|
||||
max: newData.maxData,
|
||||
splitNumber: 4,
|
||||
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "radar",
|
||||
symbolSize: 0,
|
||||
data: [
|
||||
{
|
||||
value: newData.radarDataAvg[6],
|
||||
name: "平均指标",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#f8d351"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: "#f8d351",
|
||||
shadowBlur: 25,
|
||||
shadowColor: "rgba(248,211,81,.3)",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: -10,
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: newData.radarData[6],
|
||||
name: "我的指标",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#43dfa2"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: this.colorList.linearGtoB,
|
||||
shadowBlur: 15,
|
||||
shadowColor: "rgba(0,0,0,.2)",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5,
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: this.colorList.linearBtoG,
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: this.colorList.areaBtoG
|
||||
}
|
||||
},
|
||||
data: newData.weekLineData,
|
||||
lineSmooth: true,
|
||||
markLine: {
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
type: "average",
|
||||
name: "平均值"
|
||||
}
|
||||
],
|
||||
precision: 0,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: "平均值: \n {c}"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "rgba(248,211,81,.7)"
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
position: "top",
|
||||
formatter: "{c} m",
|
||||
backgroundColor: "rgba(28,152,232,.2)",
|
||||
padding: 6
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "占位背景",
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#000",
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
silent: true,
|
||||
barWidth: "50%",
|
||||
data: newData.weekMaxData,
|
||||
animation: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
drawTiming: null,
|
||||
cdata: {
|
||||
year: null,
|
||||
weekCategory: [],
|
||||
radarData: [],
|
||||
radarDataAvg: [],
|
||||
maxData: 12000,
|
||||
weekMaxData: [],
|
||||
weekLineData: []
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
this.drawTimingFn();
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.drawTiming);
|
||||
},
|
||||
methods: {
|
||||
drawTimingFn () {
|
||||
this.setData();
|
||||
this.drawTiming = setInterval(() => {
|
||||
this.setData();
|
||||
}, 6000);
|
||||
},
|
||||
setData () {
|
||||
// 清空轮询数据
|
||||
this.cdata.weekCategory = [];
|
||||
this.cdata.weekMaxData = [];
|
||||
this.cdata.weekLineData = [];
|
||||
this.cdata.radarData = [];
|
||||
this.cdata.radarDataAvg = [];
|
||||
|
||||
let dateBase = new Date();
|
||||
this.cdata.year = dateBase.getFullYear();
|
||||
// 周数据
|
||||
for (let i = 0; i < 7; i++) {
|
||||
// 日期
|
||||
let date = new Date();
|
||||
console.log(date.getMonth());
|
||||
console.log(date.getDate());
|
||||
this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
|
||||
|
||||
// 折线图数据
|
||||
this.cdata.weekMaxData.push(this.cdata.maxData);
|
||||
let distance = Math.round(Math.random() * 11000 + 500);
|
||||
this.cdata.weekLineData.push(distance);
|
||||
|
||||
// 雷达图数据
|
||||
// 我的指标
|
||||
let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
||||
let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
||||
let hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
let radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
||||
this.cdata.radarData.unshift(radarDayData);
|
||||
|
||||
// 平均指标
|
||||
let distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
||||
let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
||||
let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
||||
let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
let radarDayDataAvg = [
|
||||
distanceAvg,
|
||||
averageSpeedAvg,
|
||||
maxSpeedAvg,
|
||||
hourAvg
|
||||
];
|
||||
this.cdata.radarDataAvg.unshift(radarDayDataAvg);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" style="width:1.5rem;height:1.25rem;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echartMixins from "@/utils/resizeMixins";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
mixins: [echartMixins],
|
||||
mounted() {
|
||||
this.draw();
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "chartRate"
|
||||
},
|
||||
tips: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 50
|
||||
},
|
||||
colorObj: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
textStyle: "#3fc0fb",
|
||||
series: {
|
||||
color: ["#00bcd44a", "transparent"],
|
||||
dataColor: {
|
||||
normal: "#03a9f4",
|
||||
shadowColor: "#97e2f5"
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
draw() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = this.$echarts.init(document.getElementById(this.id));
|
||||
// ----------------------------------------------------------------
|
||||
let tips = this.tips;
|
||||
let option = {
|
||||
title: [
|
||||
{
|
||||
text: tips * 1 + "%",
|
||||
x: "center",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
color: this.colorObj.textStyle,
|
||||
fontSize: 16
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["75%", "80%"],
|
||||
center: ["50%", "50%"],
|
||||
hoverAnimation: false,
|
||||
color: this.colorObj.series.color,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: tips,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.colorObj.series.dataColor.normal,
|
||||
shadowBlur: 10,
|
||||
shadowColor: this.colorObj.series.dataColor.shadowColor
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - tips
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 通过率/达标率 -->
|
||||
<Echart
|
||||
:options="options"
|
||||
:id="id"
|
||||
height="1.25rem"
|
||||
width="1.5rem"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '@/common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "chartRate"
|
||||
},
|
||||
tips: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 50
|
||||
},
|
||||
colorObj: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
textStyle: "#3fc0fb",
|
||||
series: {
|
||||
color: ["#00bcd44a", "transparent"],
|
||||
dataColor: {
|
||||
normal: "#03a9f4",
|
||||
shadowColor: "#97e2f5"
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// tips 是会变更的数据，所以进行监听
|
||||
tips: {
|
||||
handler (newData) {
|
||||
this.options = {
|
||||
title:{
|
||||
text: newData * 1 + "%",
|
||||
x: "center",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
color: this.colorObj.textStyle,
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["75%", "80%"],
|
||||
center: ["50%", "50%"],
|
||||
hoverAnimation: false,
|
||||
color: this.colorObj.series.color,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: newData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.colorObj.series.dataColor.normal,
|
||||
shadowBlur: 10,
|
||||
shadowColor: this.colorObj.series.dataColor.shadowColor
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - newData
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreLeft1Chart"
|
||||
height="2.75rem"
|
||||
width="3.25rem"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '@/common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler (newData) {
|
||||
this.options = {
|
||||
color: [
|
||||
"#37a2da",
|
||||
"#32c5e9",
|
||||
"#9fe6b8",
|
||||
"#ffdb5c",
|
||||
"#ff9f7f",
|
||||
"#fb7293",
|
||||
"#e7bcf3",
|
||||
"#8378ea"
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
toolbox: {
|
||||
show: true
|
||||
},
|
||||
calculable: true,
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
icon: "circle",
|
||||
bottom: 0,
|
||||
x: "center",
|
||||
data: newData.xData,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "通过率统计",
|
||||
type: "pie",
|
||||
radius: [10, 60],
|
||||
roseType: "area",
|
||||
center: ["50%", "40%"],
|
||||
data: newData.seriesData
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cdata: {
|
||||
xData: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
|
||||
seriesData: [
|
||||
{ value: 10, name: "rose1" },
|
||||
{ value: 5, name: "rose2" },
|
||||
{ value: 15, name: "rose3" },
|
||||
{ value: 25, name: "rose4" },
|
||||
{ value: 20, name: "rose5" },
|
||||
{ value: 35, name: "rose6" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreLeft2Chart"
|
||||
height="4.625rem"
|
||||
width="4.125rem"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '@/common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler (newData) {
|
||||
this.options = {
|
||||
angleAxis: {
|
||||
interval: 1,
|
||||
type: "category",
|
||||
data: newData.angleAxisData,
|
||||
z: 10,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#00c7ff",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
show: true,
|
||||
color: "#00c7ff",
|
||||
margin: 8,
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#00c7ff",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} %",
|
||||
show: false,
|
||||
padding: [0, 0, 20, 0],
|
||||
color: "#00c7ff",
|
||||
fontSize: 16
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#00c7ff",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
orient: "vartical",
|
||||
top: "center",
|
||||
bottom: "0%",
|
||||
itemWidth: 16,
|
||||
itemHeight: 8,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
color: "#A3E2F4",
|
||||
fontSize: 12,
|
||||
fontWeight: 0
|
||||
},
|
||||
},
|
||||
polar: {},
|
||||
series: [
|
||||
{
|
||||
name: "A",
|
||||
type: "bar",
|
||||
radius: ["20%", "100%"],
|
||||
data: newData.seriesData,
|
||||
coordinateSystem: "polar"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cdata: {
|
||||
angleAxisData: [
|
||||
"there1",
|
||||
"there2",
|
||||
"there3",
|
||||
"there4",
|
||||
"there5",
|
||||
"there6",
|
||||
"there7",
|
||||
"there8",
|
||||
"there9",
|
||||
"there10 "
|
||||
],
|
||||
seriesData: [
|
||||
{
|
||||
value: 87,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#f54d4d"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 80,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#f87544"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 75,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ffae00"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 69,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#dcff00"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 63,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#25d053"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 54,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#01fff5"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 47,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#007cff"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 40,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#4245ff"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 35,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#c32eff"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ff62e8"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="centreLeft1Chart" style="width:3.25rem; height: 2.75rem;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echartMixins from "@/utils/resizeMixins";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
mixins: [echartMixins],
|
||||
mounted() {
|
||||
this.draw();
|
||||
},
|
||||
methods: {
|
||||
draw() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = this.$echarts.init(document.getElementById("centreLeft1Chart"));
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
this.chart.setOption({
|
||||
color: [
|
||||
"#37a2da",
|
||||
"#32c5e9",
|
||||
"#9fe6b8",
|
||||
"#ffdb5c",
|
||||
"#ff9f7f",
|
||||
"#fb7293",
|
||||
"#e7bcf3",
|
||||
"#8378ea"
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
toolbox: {
|
||||
show: true
|
||||
},
|
||||
calculable: true,
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
icon: "circle",
|
||||
bottom: 0,
|
||||
x: "center",
|
||||
data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "增值电信业务统计表",
|
||||
type: "pie",
|
||||
radius: [10, 60],
|
||||
roseType: "area",
|
||||
center: ["50%", "40%"],
|
||||
data: [
|
||||
{ value: 10, name: "rose1" },
|
||||
{ value: 5, name: "rose2" },
|
||||
{ value: 15, name: "rose3" },
|
||||
{ value: 25, name: "rose4" },
|
||||
{ value: 20, name: "rose5" },
|
||||
{ value: 35, name: "rose6" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
window.onresize = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,200 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="centreLeft2Chart" style="width:4.125rem; height: 4.625rem;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echartMixins from "@/utils/resizeMixins";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
mixins: [echartMixins],
|
||||
mounted() {
|
||||
this.draw();
|
||||
},
|
||||
methods: {
|
||||
draw() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = this.$echarts.init(document.getElementById("centreLeft2Chart"));
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
let option = {
|
||||
angleAxis: {
|
||||
interval: 1,
|
||||
type: "category",
|
||||
data: [
|
||||
"there1",
|
||||
"there2",
|
||||
"there3",
|
||||
"there4",
|
||||
"there5",
|
||||
"there6",
|
||||
"there7",
|
||||
"there8",
|
||||
"there9",
|
||||
"there10 "
|
||||
],
|
||||
z: 10,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#00c7ff",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
show: true,
|
||||
color: "#00c7ff",
|
||||
margin: 8,
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#00c7ff",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} %",
|
||||
show: false,
|
||||
padding: [0, 0, 20, 0],
|
||||
color: "#00c7ff",
|
||||
fontSize: 16
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#00c7ff",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
orient: "vartical",
|
||||
top: "center",
|
||||
bottom: "0%",
|
||||
itemWidth: 16,
|
||||
itemHeight: 8,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
color: "#A3E2F4",
|
||||
fontSize: 12,
|
||||
fontWeight: 0
|
||||
},
|
||||
data: ["A"]
|
||||
},
|
||||
polar: {},
|
||||
series: [
|
||||
{
|
||||
name: "A",
|
||||
type: "bar",
|
||||
radius: ["20%", "100%"],
|
||||
data: [
|
||||
{
|
||||
value: 87,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#f54d4d"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 80,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#f87544"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 75,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ffae00"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 69,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#dcff00"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 63,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#25d053"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 54,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#01fff5"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 47,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#007cff"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 40,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#4245ff"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 35,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#c32eff"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ff62e8"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
coordinateSystem: "polar"
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,164 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="centreRight2Chart1" style="width:3.25rem; height: 2.60rem;">123</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echartMixins from "@/utils/resizeMixins";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
mixins: [echartMixins],
|
||||
mounted() {
|
||||
this.draw();
|
||||
},
|
||||
methods: {
|
||||
draw() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.chart = this.$echarts.init(document.getElementById("centreRight2Chart1"));
|
||||
// ----------------------------------------------------------------
|
||||
let dataBJ = [
|
||||
[94, 69, 114, 2.08, 73, 39, 22],
|
||||
[99, 73, 110, 2.43, 76, 48, 23],
|
||||
[31, 12, 30, 0.5, 32, 16, 24],
|
||||
[42, 27, 43, 1, 53, 22, 25],
|
||||
[154, 117, 157, 3.05, 92, 58, 26],
|
||||
[234, 185, 230, 4.09, 123, 69, 27],
|
||||
[160, 120, 186, 2.77, 91, 50, 28]
|
||||
];
|
||||
|
||||
let dataGZ = [
|
||||
[84, 94, 140, 2.238, 68, 18, 22],
|
||||
[93, 77, 104, 1.165, 53, 7, 23],
|
||||
[99, 130, 227, 3.97, 55, 15, 24],
|
||||
[146, 84, 139, 1.094, 40, 17, 25],
|
||||
[113, 108, 137, 1.481, 48, 15, 26],
|
||||
[81, 48, 62, 1.619, 26, 3, 27],
|
||||
[56, 48, 68, 1.336, 37, 9, 28]
|
||||
];
|
||||
|
||||
let dataSH = [
|
||||
[91, 45, 125, 0.82, 34, 23, 1],
|
||||
[65, 27, 78, 0.86, 45, 29, 2],
|
||||
[83, 60, 84, 1.09, 73, 27, 3],
|
||||
[109, 81, 121, 1.28, 68, 51, 4],
|
||||
[106, 77, 114, 1.07, 55, 51, 5],
|
||||
[109, 81, 121, 1.28, 68, 51, 6],
|
||||
[106, 77, 114, 1.07, 55, 51, 7]
|
||||
];
|
||||
|
||||
let lineStyle = {
|
||||
normal: {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
}
|
||||
};
|
||||
|
||||
let option = {
|
||||
radar: {
|
||||
indicator: [
|
||||
{ name: "AQI", max: 300 },
|
||||
{ name: "PM2.5", max: 250 },
|
||||
{ name: "PM10", max: 300 },
|
||||
{ name: "CO", max: 5 },
|
||||
{ name: "NO2", max: 200 },
|
||||
{ name: "SO2", max: 100 }
|
||||
],
|
||||
shape: "circle",
|
||||
splitNumber: 5,
|
||||
name: {
|
||||
textStyle: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
"rgba(238, 197, 102, 0.1)",
|
||||
"rgba(238, 197, 102, 0.2)",
|
||||
"rgba(238, 197, 102, 0.4)",
|
||||
"rgba(238, 197, 102, 0.6)",
|
||||
"rgba(238, 197, 102, 0.8)",
|
||||
"rgba(238, 197, 102, 1)"
|
||||
].reverse()
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(238, 197, 102, 0.5)"
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "北京",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: dataBJ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F9713C"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "上海",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: dataSH,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#B3E4A1"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "广州",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: dataGZ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#centreRight2Chart1 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreRight2Chart1"
|
||||
height="2.60rem"
|
||||
width="100%"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '@/common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler (newData) {
|
||||
// 固定样式数据
|
||||
let lineStyle = {
|
||||
normal: {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
}
|
||||
};
|
||||
|
||||
this.options = {
|
||||
radar: {
|
||||
indicator: newData.indicatorData,
|
||||
shape: "circle",
|
||||
splitNumber: 5,
|
||||
name: {
|
||||
textStyle: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
"rgba(238, 197, 102, 0.1)",
|
||||
"rgba(238, 197, 102, 0.2)",
|
||||
"rgba(238, 197, 102, 0.4)",
|
||||
"rgba(238, 197, 102, 0.6)",
|
||||
"rgba(238, 197, 102, 0.8)",
|
||||
"rgba(238, 197, 102, 1)"
|
||||
].reverse()
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(238, 197, 102, 0.5)"
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "北京",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: newData.dataBJ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F9713C"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "上海",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: newData.dataSH,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#B3E4A1"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "广州",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: newData.dataGZ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
} //end
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cdata: {
|
||||
indicatorData: [
|
||||
{ name: "data1", max: 300 },
|
||||
{ name: "data2", max: 250 },
|
||||
{ name: "data3", max: 300 },
|
||||
{ name: "data4", max: 5},
|
||||
{ name: "data5", max: 200 },
|
||||
{ name: "data6", max: 100 }
|
||||
],
|
||||
dataBJ: [
|
||||
[94, 69, 114, 2.08, 73, 39, 22],
|
||||
[99, 73, 110, 2.43, 76, 48, 23],
|
||||
[31, 12, 30, 0.5, 32, 16, 24],
|
||||
[42, 27, 43, 1, 53, 22, 25],
|
||||
[154, 117, 157, 3.05, 92, 58, 26],
|
||||
[234, 185, 230, 4.09, 123, 69, 27],
|
||||
[160, 120, 186, 2.77, 91, 50, 28]
|
||||
],
|
||||
dataGZ: [
|
||||
[84, 94, 140, 2.238, 68, 18, 22],
|
||||
[93, 77, 104, 1.165, 53, 7, 23],
|
||||
[99, 130, 227, 3.97, 55, 15, 24],
|
||||
[146, 84, 139, 1.094, 40, 17, 25],
|
||||
[113, 108, 137, 1.481, 48, 15, 26],
|
||||
[81, 48, 62, 1.619, 26, 3, 27],
|
||||
[56, 48, 68, 1.336, 37, 9, 28]
|
||||
],
|
||||
dataSH: [
|
||||
[91, 45, 125, 0.82, 34, 23, 1],
|
||||
[65, 27, 78, 0.86, 45, 29, 2],
|
||||
[83, 60, 84, 1.09, 73, 27, 3],
|
||||
[109, 81, 121, 1.28, 68, 51, 4],
|
||||
[106, 77, 114, 1.07, 55, 51, 5],
|
||||
[109, 81, 121, 1.28, 68, 51, 6],
|
||||
[106, 77, 114, 1.07, 55, 51, 7]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@ const resizeChartMethod = '$__resizeChartMethod';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 在组件内部将图表init的引用映射到chart属性上
|
||||
// 在组件内部将图表 init 的引用映射到 chart 属性上
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
@@ -13,7 +13,7 @@ export default {
|
||||
window.addEventListener('resize', this[resizeChartMethod], false);
|
||||
},
|
||||
activated() {
|
||||
// 防止keep-alive之后图表变形
|
||||
// 防止 keep-alive 之后图表变形
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
@@ -22,11 +22,12 @@ export default {
|
||||
window.removeEventListener('reisze', this[resizeChartMethod]);
|
||||
},
|
||||
methods: {
|
||||
// 通过lodash的防抖函数来控制resize的频率
|
||||
// 通过 lodash 的防抖函数来控制 resize 的频率
|
||||
[resizeChartMethod]: debounce(function() {
|
||||
if (this.chart) {
|
||||
console.log('修改');
|
||||
this.chart.resize();
|
||||
}
|
||||
}, 100),
|
||||
}, 300),
|
||||
},
|
||||
};
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
|
||||
<div class="decoration2">
|
||||
<dv-decoration-2 :reverse="true" style="width:5px;height:480px;" />
|
||||
<dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CentreLeft1Chart from "@/components/echart/centerLeft/centreLeft1Chart";
|
||||
import CentreLeft1Chart from "@/components/echart/centerLeft/centerLeft1Chart";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<icon name="chart-pie"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">数据情况雷达图</span>
|
||||
<span class="fs-xl text mx-2">数据情况</span>
|
||||
<dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -18,7 +18,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CentreLeft2Chart from "@/components/echart/centerLeft/centreLeft2Chart";
|
||||
import CentreLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import centreRight2Chart1 from "@/components/echart/centerRight/centerRight2Chart";
|
||||
import centreRight2Chart1 from "@/components/echart/centerRight/centerRightChart";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
||||
Reference in New Issue
Block a user