devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp 导入ucharts图表插件 H5项目， 使用echarts eopts配置_uniapp 秋云echarts 小程序opts怎么设置

作者：Monodyee | 2024-04-30 18:34:09

赞

踩

uniapp 秋云echarts 小程序opts怎么设置

先下载ucharts H5示例源码：

uCharts: 高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。

官方示例案例H5 

1. 下载之后可以直接用Webstorm打开此位置的示例项目，移动端的H5的项目

2. 启动之后创建一个运行实例：

3. 如上图启动之后，点击左正解的浏览地址看效果

运行效果首页

根据项目需要：H5, Echarts配置，可以

对应点的案例源码：

  1. <template>
  2.   <view class="content">
  3.     <!-- config-echarts.js中的seriesTemplate为option.series模板，可以作为series中的默认配置，:chartData.series中的配置如果有相同的，会覆盖掉 seriesTemplate 中的配置 -->
  4. 		<qiun-title-bar title="柱状图+动态更新数据" />
  5.     <view class="charts-box">
  6.       <!-- 如果发布到二级或者多级目录中，需要配置 directory 属性 -->
  7.       <!-- <qiun-data-charts type="column" :chartData="chartsDataColumn1" :echartsH5="true" :echartsApp="true" directory="/h5/" @complete="complete"/> -->
  8.       <qiun-data-charts type="column" :chartData="chartsDataColumn1" :echartsH5="true" :echartsApp="true" @complete="complete"/>
  9.     </view>
  10.     <qiun-title-bar title="堆叠柱状图+点击获取索引" />
  11.     <view class="charts-box">
  12.       <!-- 注意：这里的opts是uCharts的配置，eopts是ECharts的配置，不要搞混，如果不需要用在各种小程序端，是不需要传uCharts的opts的，只需要传eopts即可！！！ -->
  13.       <qiun-data-charts type="column" :opts="{extra:{column:{type:'stack'}}}" :eopts="{xAxis:{axisLabel:{color:'#FF0000'}}}" :chartData="chartsDataColumn2" :echartsH5="true" :echartsApp="true" @getIndex="getIndex"/>
  14.     </view>
  15.     <qiun-title-bar title="柱状图+渐变色" />
  16.     <view class="charts-box">
  17.       <qiun-data-charts type="column" :chartData="chartsDataColumn3" :echartsH5="true" :echartsApp="true"/>
  18.     </view>
  19.     <qiun-title-bar title="圆角柱状图" />
  20.     <view class="charts-box">
  21.       <!-- 此处改变的是 seriesTemplate 模板中的默认配置，不必每个series都传itemStyle，将会覆盖:chartData.series 实现更低的代码量 -->
  22.       <qiun-data-charts type="column" :eopts="{seriesTemplate:{itemStyle:{normal:{barBorderRadius:[30, 30, 0, 0]}}}}" :chartData="chartsDataColumn4" :echartsH5="true" :echartsApp="true"/>
  23.     </view>
  24.     <qiun-title-bar title="横向柱状图(仅ECharts)" />
  25.     <view class="charts-box">
  26.       <qiun-data-charts type="column" :eopts="columneopts" :chartData="chartsDataColumn5" :echartsH5="true" :echartsApp="true"/>
  27.     </view>
  28. 		<qiun-title-bar title="折线图" />
  29.     <view class="charts-box">
  30.       <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/>
  31.     </view>
  32. 		<qiun-title-bar title="曲线图" />
  33.     <view class="charts-box">
  34.       <!-- 此处改变的是 seriesTemplate 模板中的默认配置，不必每个series都传smooth:true，将会覆盖:chartData.series 实现更低的代码量 -->
  35.       <qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}" :eopts="{seriesTemplate:{smooth:true}}" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/>
  36.     </view>
  37. 		<qiun-title-bar title="区域图" />
  38.     <view class="charts-box">
  39.       <qiun-data-charts type="area" :eopts="{seriesTemplate:{areaStyle:{opacity:0.2}}}" :chartData="chartsDataLine2" :echartsH5="true" :echartsApp="true"/>
  40.     </view>
  41.     <qiun-title-bar title="渐变色区域图" />
  42.     <view class="charts-box">
  43.       <!-- 注意：这里的opts是uCharts的配置，eopts是ECharts的配置，不要搞混，如果不需要用在各种小程序端，是不需要传uCharts的opts的，只需要传eopts即可！！！这里加opts是为了覆盖uCharts的rose图的默认图例配置的位置 -->
  44.       <qiun-data-charts type="area" :opts="{yAxis:{data:[{min:0}]},extra:{area:{type:'curve',addLine:true,gradient:true}}}" :chartData="chartsDataLine3" :echartsH5="true" :echartsApp="true"/>
  45.     </view>
  46. 		<qiun-title-bar title="饼图" />
  47.     <view class="charts-box">
  48.       <qiun-data-charts type="pie" :chartData="chartsDataPie1" :echartsH5="true" :echartsApp="true"/>
  49.     </view>
  50. 		<qiun-title-bar title="环形图+动态更新option"/>
  51. 		<view class="charts-box">
  52.       <!-- 演示动态改变eopts -->
  53. 		  <qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/>
  54. 		</view>
  55. 		<qiun-title-bar title="面积玫瑰图"/>
  56. 		<view class="charts-box">
  57.        <!-- 注意：这里的opts是uCharts的配置，eopts是ECharts的配置，不要搞混，如果不需要用在各种小程序端，是不需要传uCharts的opts的，只需要传eopts即可！！！这里加opts是为了覆盖uCharts的rose图的默认图例配置的位置 -->
  58. 		  <qiun-data-charts type="rose" :opts="{legend:{position:'bottom'}}" :chartData="chartsDataPie3" :echartsH5="true" :echartsApp="true"/>
  59. 		</view>
  60. 		<qiun-title-bar title="漏斗图"/>
  61. 		<view class="charts-box">
  62. 		  <qiun-data-charts type="funnel" :chartData="chartsDataPie4" :echartsH5="true" :echartsApp="true"/>
  63. 		</view>
  64.   </view>
  65. </template>
  66.  
  67. <script>
  68. //下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
  69. import demodata from '@/mockdata/demodata.json';
  70.  
  71. export default {
  72.   data() {
  73.     return {
  74.       chartsDataColumn1:{},
  75.       chartsDataColumn2: {},
  76.       chartsDataColumn3:{},
  77.       chartsDataColumn4:{},
  78.       chartsDataColumn5:{},
  79.       chartsDataPie1: {},
  80.       chartsDataPie2: {},
  81.       chartsDataPie3: {},
  82.       chartsDataPie4: {},
  83.       chartsDataLine1: {},
  84.       chartsDataLine2: {},
  85.       chartsDataLine3: {},
  86.       ringOpts:{},
  87.       //横向柱状图的配置，您也可以把默认配置写在config-echarts.js中
  88.       columneopts:{
  89.         grid: {
  90.           left: '3%',
  91.           right: '4%',
  92.           bottom: 30,
  93.           top:10,
  94.           containLabel: true
  95.         },
  96.         xAxis: {
  97.           type: 'value',
  98.           boundaryGap: [0, 0.01],
  99.           axisLine: {
  100.             show: false
  101.           },
  102.           axisTick: {
  103.             show: false
  104.           }
  105.         },
  106.         yAxis: {
  107.           type: 'category',
  108.           data: []
  109.         },
  110.         //series模板，会覆盖至chartData中的series中的每一个数组内
  111.         seriesTemplate:{
  112.           "label": {
  113.           	"show": true,
  114.             "color": "#666666",
  115.           	"position": 'right',
  116.           },
  117.         }
  118.       }
  119.     };
  120.   },
  121.   onReady() {
  122.     setTimeout(() => {
  123.       //1. 获取数据
  124.       this.getServerData();
  125.     }, 1000);
  126.     
  127.     //演示变更数据后显示loading状态，如果不想展示loading状态，则不需要此步，可以注释掉看效果
  128.     setTimeout(() => {
  129.       this.chartsDataColumn1.series=[];
  130.     }, 4000);
  131.     
  132.     setTimeout(() => {
  133.       //2. 模拟新的柱状图
  134.       this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Line));
  135.       //测试动态绑定的eopts
  136.       this.ringOpts={
  137.         color:['#FF00FF','#AAFF11'],
  138.         legend:{show:false}
  139.       }
  140.     }, 5000);
  141.   },
  142.   methods: {
  143.     getServerData() {
  144.       
  145.       //因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
  146.       //开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
  147.       
  148.       this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Column));
  149.       let tmpColumn3=JSON.parse(JSON.stringify(demodata.Column));
  150.       //series.linearGradient代表渐变色：
  151.       //前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始；
  152.       //第5个参数为数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
  153.       tmpColumn3.series[0].linearGradient=[0, 0, 0, 1,[{offset: 0, color: '#0EE2F8'},{offset: 1, color: '#1890FF'}]];
  154.       tmpColumn3.series[1].linearGradient=[0, 0, 0, 1,[{offset: 0, color: '#2BDCA8'},{offset: 1, color: '#91CB74'}]];
  155.       this.chartsDataColumn3=tmpColumn3;
  156.       
  157.       this.chartsDataColumn4=JSON.parse(JSON.stringify(demodata.Column));
  158.       this.chartsDataColumn5=JSON.parse(JSON.stringify(demodata.Column));
  159.       this.chartsDataPie1=JSON.parse(JSON.stringify(demodata.PieA))
  160.       this.chartsDataPie2=JSON.parse(JSON.stringify(demodata.PieA))
  161.       this.chartsDataPie3=JSON.parse(JSON.stringify(demodata.PieA))
  162.       this.chartsDataPie4=JSON.parse(JSON.stringify(demodata.PieA))
  163.       this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
  164.       
  165.       
  166.       //处理堆叠柱状图的series
  167.       let duidie = JSON.parse(JSON.stringify(demodata.Column))
  168.       for (var i = 0; i < duidie.series.length; i++) {
  169.         duidie.series[i].stack = 'one'
  170.         duidie.series[i].barWidth = '50%'
  171.         duidie.series[i].label = {position: 'inside',color:'#FFFFFF'}
  172.       }
  173.       //这里需要注意，一定要定义一个临时的变量再统一赋值给chartData，否则chartData具有监听属性，只要有变化就会导致重新渲染
  174.       this.chartsDataColumn2=duidie
  175.       
  176.       
  177.       let areadata = JSON.parse(JSON.stringify(demodata.Line))
  178.       areadata.series = areadata.series.reverse()
  179.       this.chartsDataLine2=areadata
  180.       
  181.       //渐变色区域图
  182.       let linearareadata={
  183.         categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  184.         series:[{
  185.           name: "成交量A",
  186.           smooth:true,
  187.           areaStyle:{
  188.             color: {
  189.               type: 'linear',
  190.               x: 0,
  191.               y: 0,
  192.               x2: 0,
  193.               y2: 1,
  194.               colorStops: [{
  195.                   offset: 0, color: '#1890FF' // 0% 处的颜色
  196.               }, {
  197.                   offset: 1, color: '#FFFFFF' // 100% 处的颜色
  198.               }],
  199.               global: false // 缺省为 false
  200.             }
  201.           },
  202.           data: [100, 80, 95, 150, 112, 132]
  203.         }]
  204.       }
  205.       this.chartsDataLine3=linearareadata
  206.       
  207.     },
  208.     complete(e) {
  209.       console.log("渲染完成事件",e);
  210.     },
  211.     getIndex(e){
  212.       console.log("获取点击索引事件",e);
  213.     }
  214.   }
  215. };
  216. </script>
  217.  
  218. <style>
  219. .content {
  220.   display: flex;
  221.   flex-direction: column;
  222.   flex: 1;
  223. }
  224.  
  225. .charts-box {
  226.   width: 100%;
  227.   height: 300px;
  228. }
  229. </style>

 导入到自己的项目

1. 下载之后，打开项目uniapp项目，任意一个，可以用Hbuilder创建一个。

2. 将下面所有的文件拷贝到【自己的项目】对应目录


3.即可直接使用。

其他形式的项目导入参考

  • 1、请将static目录下文件复制到根目录的static文件夹下

  • 2、qiun-title-bar文件夹可删除

  • 3、其他的都不要动，直接原样复制到您项目中的components目录

 打开下载的项目,找到公司对应的项目形式：用uni_modules,或者用node_modules的每个都有单独的用于离线导入的库。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/514643
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号