Vue + Element 中的Echart單線圖
阿新 • • 發佈:2020-07-29
看圖!!!
Echart表的引入使用看文件!
下面給程式碼
<!-- 第二部分柱形資料圖 --> <div class="main-two-chart"> <div class="integral-plate" id="main-two-chart" style="width:100%;height:200px;"></div> </div> script中的methods方法: // 第二部分的Echart圖 getMainTwoChart () { const myChart = this.$echarts.init(document.getElementById('main-two-chart')) const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', top: '4%', bottom: '4%', containLabel: true }, xAxis: { show: false, type: 'value' }, yAxis: { type: 'category', // 靜態 data: [124124] // data: this.secondLeftData }, series: [ { name: '2011年', type: 'bar', data: [0, 50], // barWidth: 設定寬度大小 barWidth: 10 // 設定顏色 // itemStyle: { // normal: { // color: function (params) { // // build a color map as your need. // var colorList = [ // '#3aa1ff' // ] // return colorList[params.dataIndex] // } // } // } } ] } myChart.setOption(option) window.addEventListener('resize', function () { myChart.resize() }) }, 初始化呼叫 mounted () { // 兩個動態資料圖的初始化呼叫 this.getMainTwoChart() }