| | |
| | | <template> |
| | | <!-- <div> --> |
| | | <!-- <div>1111111111111111111111111111111111111111</div> --> |
| | | <div :class="className" :style="{ height: height, width: width }" /> |
| | | <div |
| | | :class="className" |
| | | :style="{ height: height, width: width }" |
| | | /> |
| | | <!-- </div> --> |
| | | </template> |
| | | |
| | | <script> |
| | | import * as echarts from 'echarts' |
| | | require('echarts/theme/macarons') // echarts theme |
| | | import resize from './mixins/resize' |
| | | import * as echarts from 'echarts' // echarts theme |
| | | // import resize from './mixins/resize' |
| | | require('echarts/theme/macarons') |
| | | |
| | | export default { |
| | | mixins: [resize], |
| | | // mixins: [resize], |
| | | props: { |
| | | className: { |
| | | type: String, |
| | |
| | | // required: true |
| | | // } |
| | | }, |
| | | data() { |
| | | data () { |
| | | return { |
| | | chart: null, |
| | | } |
| | | }, |
| | | watch: { |
| | | chartData: { |
| | | handler(val) { |
| | | handler (val) { |
| | | this.setOptions(val) |
| | | }, |
| | | deep: true |
| | | }, |
| | | }, |
| | | mounted() { |
| | | mounted () { |
| | | this.$nextTick(() => { |
| | | this.initChart() |
| | | }) |
| | | }, |
| | | beforeDestroy() { |
| | | beforeDestroy () { |
| | | if (!this.chart) { |
| | | return |
| | | } |
| | |
| | | this.chart = null |
| | | }, |
| | | methods: { |
| | | initChart() { |
| | | initChart () { |
| | | this.chart = echarts.init(this.$el, 'macarons') |
| | | this.chart.clear() |
| | | this.setOptions(this.chartData) |
| | | }, |
| | | setOptions(val) { |
| | | setOptions (val) { |
| | | console.log('val,val', val) |
| | | // val.series.forEach(element => { |
| | | // element.data = element.data.map(item => item === 0 ? 0.1 : item) |
| | | // }) |
| | | let that = this |
| | | function fontSize(res) { |
| | | function fontSize (res) { |
| | | let clientWidth = |
| | | window.innerWidth || |
| | | document.documentElement.clientWidth || |
| | |
| | | color: 'rgb(255, 255, 255);', |
| | | fontSize: fontSize(0.117), // 字体大小 |
| | | lineHeight: 0 |
| | | }, |
| | | formatter: function (params) { |
| | | console.log('params', params) |
| | | let html = params[0].name |
| | | params.forEach((item, index) => { |
| | | html += (`<br/>${item.marker + item.seriesName}: ${item.value === undefined ? 0 : item.value}`) |
| | | }) |
| | | return html |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: 'log', |
| | | axisTick: { |
| | | show: true, // 轴线刻度 |
| | | }, |
| | | axisLine: { |
| | | show: true, //不显示坐标轴线 |
| | | show: true, // 不显示坐标轴线 |
| | | }, |
| | | axisLabel: { |
| | | show: true, //不显示坐标轴上的文字 |
| | | } |
| | | // axisLabel: { |
| | | // formatter: function (value) { |
| | | // return value === 0.1 ? 0 : value |
| | | // } |
| | | // }, |
| | | }, |
| | | legend: { |
| | | data: val.title, |
| | |
| | | }, |
| | | true |
| | | ) |
| | | window.onresize = this.chart.resize |
| | | // window.onresize = this.chart.resize |
| | | }, |
| | | }, |
| | | } |