uni-app中使用Echarts绘画图表 - Powered by Discuz! Archiver

首页 › uni-app论坛 › uni-app中使用Echarts绘画图表

郑亮飞 發表於 2019-9-11 17:45:00

uni-app中使用Echarts绘画图表

<p>enmnm...一般会使用npm下载echarts这个包，但是不知道是我自己的配置问题还是别的原因，一直出不来图线，</p>
<p>于是，把Hello uni-app模板里的那个组件抱过来，然后，成了！</p>
<p><img src="https://img2018.cnblogs.com/blog/1777096/201909/1777096-20190911174028134-2094373697.jpg" alt=""></p>
<p>首先，</p>
<p>1、页面引入</p>
<div class="cnblogs_code">
<pre> <template>
      <view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">container</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
            <view>
               <view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">canvasView</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
               <mpvue-echarts <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ec-canvas</span><span style="color: rgba(128, 0, 0, 1)">"</span> @onInit=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">lineInit</span><span style="color: rgba(128, 0, 0, 1)">"</span> canvasId=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">line</span><span style="color: rgba(128, 0, 0, 1)">"</span> <span style="color: rgba(0, 0, 255, 1)">ref</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">lineChart</span><span style="color: rgba(128, 0, 0, 1)">"</span> />
            </view>
            </view>
      </view>
</template></pre>
</div>
<p>2、逻辑层</p>
<div class="cnblogs_code">
<pre><script><span style="color: rgba(0, 0, 0, 1)">
import </span>* <span style="color: rgba(0, 0, 255, 1)">as</span> echarts <span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@/components/echarts/echarts.simple.min.js</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;
import mpvueEcharts </span><span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@/components/mpvue-echarts/src/echarts.vue</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
   data() {
         </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
            updateStatus: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
            line: {
               legend: {
                     data: [</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">邮件营销</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">]
               },
               xAxis: {
                     type: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">category</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
                     data: [</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">Mon</span><span style="color: rgba(128, 0, 0, 1)">'</span>, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">Tue</span><span style="color: rgba(128, 0, 0, 1)">'</span>, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">Wed</span><span style="color: rgba(128, 0, 0, 1)">'</span>, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">Thu</span><span style="color: rgba(128, 0, 0, 1)">'</span>, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">Fri</span><span style="color: rgba(128, 0, 0, 1)">'</span>, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">Sat</span><span style="color: rgba(128, 0, 0, 1)">'</span>, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">Sun</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">]
               },
               yAxis: {
                     type: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">value</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
                     data: []
               },
               dataZoom: [{
                     type: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">slider</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
                     start: </span><span style="color: rgba(128, 0, 128, 1)">30</span><span style="color: rgba(0, 0, 0, 1)">,
                     end: </span><span style="color: rgba(128, 0, 128, 1)">100</span><span style="color: rgba(0, 0, 0, 1)">,
                     zoomLock: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
               }],
               grid: {
                     left: </span><span style="color: rgba(128, 0, 128, 1)">40</span><span style="color: rgba(0, 0, 0, 1)">,
                     right: </span><span style="color: rgba(128, 0, 128, 1)">40</span><span style="color: rgba(0, 0, 0, 1)">,
                     bottom: </span><span style="color: rgba(128, 0, 128, 1)">20</span><span style="color: rgba(0, 0, 0, 1)">,
                     top: </span><span style="color: rgba(128, 0, 128, 1)">40</span><span style="color: rgba(0, 0, 0, 1)">,
                     containLabel: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
               },
               series: [{
                     data: [],
                     data: [</span><span style="color: rgba(128, 0, 128, 1)">820</span>, <span style="color: rgba(128, 0, 128, 1)">932</span>, <span style="color: rgba(128, 0, 128, 1)">901</span>, <span style="color: rgba(128, 0, 128, 1)">934</span>, <span style="color: rgba(128, 0, 128, 1)">1290</span>, <span style="color: rgba(128, 0, 128, 1)">1330</span>, <span style="color: rgba(128, 0, 128, 1)">1320</span><span style="color: rgba(0, 0, 0, 1)">],
                     type: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">line</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
                     color: [</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">#5eb4e2</span><span style="color: rgba(128, 0, 0, 1)">'</span>], <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">折线条的颜色</span>
<span style="color: rgba(0, 0, 0, 1)">                }]
            }
         }
   },
   methods: {
         lineInit(e) {
            let {
               width,
               height
            } </span>=<span style="color: rgba(0, 0, 0, 1)"> e;
            let canvas </span>= <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$refs.lineChart.canvas
            echarts.setCanvasCreator(() </span>=><span style="color: rgba(0, 0, 0, 1)"> canvas);
            let lineChart </span>= echarts.init(canvas, <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">, {
               width: width,
               height: height
            })
            canvas.setChart(lineChart)
            lineChart.setOption(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.line)
            </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$refs.lineChart.setChart(lineChart)
         },
   },
   components: {
         mpvueEcharts
   }
}
</span></script></pre>
</div>
<p>3、样式设定</p>
<div class="cnblogs_code">
<pre><style><span style="color: rgba(0, 0, 0, 1)">

.ec</span>-<span style="color: rgba(0, 0, 0, 1)">canvas {
   display: flex;
   height: </span><span style="color: rgba(128, 0, 128, 1)">100</span>%<span style="color: rgba(0, 0, 0, 1)">;
   flex: </span><span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">;
}

.canvasView {
   width: 700upx;
   height: 500upx;
}

</span></style></pre>
</div>
<p><img src="https://img2018.cnblogs.com/blog/1777096/201909/1777096-20190911174513450-612080972.jpg" alt=""></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/angenstern/p/11507676.html

頁: [1]

查看完整版本: uni-app中使用Echarts绘画图表