uni-app 下使用ECharts

林中林 發表於 2021-3-29 14:15:00

关键词：uni-app；ECharts；
认知尚浅，如有高见，愿闻其详。
 
 前言：本次的教程与上次的基于WePY 2.x平台下使用ECharts方式基本一致，毕竟目标平台都是微信小程序而已（别的平台未测试），只是就是多了一个参数而已。
 本次使用的是仍然是echarts-for-weixin组件，其对小程序进行了兼容适配，我们进行直接下载项目的组件文件，然后引入就能使用了。其次，还有一种方式，就是去uni-app插件市场进行echarts搜索，是有人已经做了适配的，同样是在此项目的基础上改的，只不过他的方式是通过ec参数传入options，进行数据赋值。废话不多说，开干。
 
<h2 id="步骤">步骤</h2>
<ol>
<li>先下载开源项目echarts-for-weixin，把开源项目中ec-canvas文件夹中的文件拷到自己的项目中（千万别下Release，好像还是老版本....）</li>
</ol>
<img src="https://img2020.cnblogs.com/blog/1667295/202102/1667295-20210202121022694-60271341.png" alt="" loading="lazy">
<ol start="2">
<li>
对引入组件中的<code>ec-canvas.js</code>文件进行一点点的修改（重要）
<blockquote>
本步骤主要是为了解决引入后使用中点击无效果与echart初始化问题，具体问题于文章底部详述。
</blockquote>
</li>
</ol>
<img src="https://img2020.cnblogs.com/blog/1667295/202103/1667295-20210318180740068-1014450640.png" alt="" loading="lazy">
<ol start="3">
<li>
在需要在<code>pages.json</code>下的<code>globalStyle</code>引入<code>ec-canvas</code>组件
<blockquote>
①-全局引入<code>ec-canvas</code>组件，用于承载统计图表
</blockquote>
<pre><code class="language-json"> "globalStyle": {
...
"usingComponents": {//引入全局ec-canvas组件
"ec-canvas": "/static/plugin/echart/ec-canvas"//根据自己放的路径改变
}
},
</code></pre>
</li>
<li>
进行<code>Page</code>或<code>Component</code>下的<code> template</code>节点构建以及<code>style</code>样式引入，
<blockquote>
①-构建节点
</blockquote>
<pre><code class="language-vue"><template>
<view class="container">
<view class="main">
 <ec-canvas
 id="month-trend-bar-dom"
 class="month-trend"
 canvas-id="month-trend-bar"
 @init="echartBarInit"
 :ec="ec"
 >
 </ec-canvas>
</view>
</view>
</template>
</code></pre>
<blockquote>
②-引入样式 注意修改<code>lang</code>，本教程中使用的是<code>scss</code>
</blockquote>
<pre><code class="language-css"><style lang="scss">
.container{
margin-top: 30px;
min-height: 100%;
.main{
width: 750rpx;
.month-trend{
 display: block;
 width: 750rpx;
 height: 500rpx;
}
}
}
</style>
</code></pre>
</li>
<li>
声明<code>data</code>中的<code>ec</code>以及定义<code>echartBarInit</code>初始化方法
<blockquote>
①-声明 <code>ec</code>
</blockquote>
<pre><code class="language-js">data: {
// 有需要的可进行一些配置
ec: {
}
},
</code></pre>
<blockquote>
②-定义<code>echarts</code>初始胡方法<code>echartBarInit</code>
</blockquote>
<pre><code class="language-js">methods: {
echartBarInit({ detail }) {
 // 初始化方法
 this.initChart(
 detail.echart,//ec-canvas传回的echart参数
 detail.canvas,
 detail.width,
 detail.height,
 detail.dpr,
 detail.wxNode//ec-canvas传回的this
 );
},
initChart(echart, canvas, width, height, dpr, wxNode) {
 let chart = echart.init(canvas, null, {//进行chart初始化
 width: width,
 height: height,
 devicePixelRatio: dpr,
 });
 canvas.setChart(chart);
 var option = {
 color: [
 "#37A2DA",
 "#32C5E9",
 "#67E0E3",
 "#91F2DE",
 "#FFDB5C",
 "#FF9F7F",
 ],
 legend: {
 data: ["直接访问", "邮件营销", "联盟广告"],
 },
 xAxis: [
 {
 type: "category",
 data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
 axisTick: {
 alignWithLabel: true,
 },
 },
 ],
 yAxis: [
 {
 type: "value",
 },
 ],
 series: [
 {
 name: "直接访问",
 type: "bar",
 barWidth: "60%",
 data: ,
 },
 {
 name: "邮件营销",
 type: "bar",
 stack: "总量",
 label: {
 normal: {
 show: true,
 position: "insideRight",
 },
 },
 data: ,
 },
 {
 name: "联盟广告",
 type: "bar",
 stack: "总量",
 label: {
 normal: {
 show: true,
 position: "insideRight",
 },
 },
 data: ,
 },
 ],
 };
 chart.setOption(option);//赋值option
 wxNode.chart = chart;//赋值ec-canvas中的chart参数，达到监听效果实现
},
}
</code></pre>
</li>
</ol>
至此，整个教程已经结束了，不出问题，你就可以看到效果了。 
完整代码请移步至我的开源项目：Memoyu/mbill_wechat_app: 基于uni-app搭建个人记账小程序
 
<h2 id="点击无效果问题">点击无效果问题</h2>
请参考此文底部：WePY 2.x 下使用ECharts - Memoyu - 博客园 (cnblogs.com)
 
<h2 id="效果">效果</h2>
<img src="https://img2020.cnblogs.com/blog/1667295/202103/1667295-20210318180539315-1020042920.gif" alt="" loading="lazy"> 
来源：https://www.cnblogs.com/memoyu/p/14555331.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 下使用ECharts