| | |
| | | // 例如:import《组件名称》from'《组件路径》'; |
| | | |
| | | import json from '@/assets/json/sensor.json' |
| | | import * as echarts from 'echarts' |
| | | // import { parse } from 'path-to-regexp' |
| | | // import LineChart from '@/components/Echarts/LineChart' |
| | | // import draggable from 'vuedraggable' |
| | |
| | | const that = this |
| | | var bar_dv = this.$refs.main |
| | | if (bar_dv) { |
| | | that.myChart = this.$echarts.init(bar_dv) |
| | | that.myChart = echarts.init(bar_dv) |
| | | var option = { |
| | | title: { |
| | | left: 'center', |
| | |
| | | bottom: 25 |
| | | }, |
| | | tooltip: { |
| | | // formatter:function(res){ |
| | | // console.log(res,'res'); |
| | | // var result='' |
| | | // var html1='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff;"></span>' |
| | | // result+=res[0].axisValue+"<br/>"+html1+res[0].value |
| | | // return result |
| | | // }, |
| | | formatter: function(res) { |
| | | console.log(res, 'res') |
| | | var result = '' |
| | | var html1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:red;"></span>' |
| | | result += res[0].axisValue + '<br/>' + html1 + res[0].value |
| | | return result |
| | | }, |
| | | trigger: 'axis', |
| | | backgroundColor: '#444', // 通过设置rgba调节背景颜色与透明度 |
| | | color: 'red', |
| | | textStyle: { // 悬浮框文字样式 |
| | | color: '#fff', |
| | | fontSize: 12 |
| | | }, |
| | | axisPointer: { |
| | | type: 'cross', |
| | | label: { |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | // prettier-ignore |
| | | itemStyle: { |
| | | normal: { |
| | | color: '#fff', // 拐点颜色 |
| | | borderColor: 'red', // 拐点边框颜色 |
| | | borderWidth: 3// 拐点边框大小 |
| | | }, |
| | | emphasis: { // 突出效果配置(鼠标置于拐点上时) |
| | | borderColor: '#c00', // 拐点边框颜色 |
| | | borderWidth: 2, // 拐点边框宽度 |
| | | shadowColor: '#c00', // 阴影颜色 |
| | | shadowBlur: 3, // 阴影渐变范围控制 |
| | | color: 'red'// hover拐点颜色定义 |
| | | } |
| | | }, |
| | | symbolSize: 6, |
| | | data: this.PM2_5Data, |
| | | type: 'line', |
| | | label: { |