站長資訊網
        最全最豐富的資訊網站

        uniapp中如何引用echarts

        uniapp引用echarts的方法:1、通過uni-app官網直接安裝echarts插件生成echarts項目模板;2、創建一個新的hello uni-app項目模板;3、把echarts放到components中。

        uniapp中如何引用echarts

        本教程操作環境:windows7系統、uni-app2.5.1版本,Dell G3電腦。

        推薦(免費):uni-app教程

        uni-app 引入 echarts

        <template>          <view class="container">                <view>                    <view class="canvasView">                     <mpvue-echarts class="ec-canvas" @onInit="lineInit" canvasId="line" ref="lineChart" />                 </view>                </view>            </view> </template>     <script>     // import * as echarts from '@/components/echarts/echarts.simple.min.js';     // import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'; import * as echarts from '../echarts/echarts.simple.min.js' import mpvueEcharts from '../mpvue-echarts/src/echarts.vue'     export default {         data() {             return {                 updateStatus: false,                 line: {                     legend: {                         data: ['郵件營銷']                     },                     xAxis: {                         type: 'category',                         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']                     },                     yAxis: {                         type: 'value',                         data: []                     },                     dataZoom: [{                        type: 'slider',                        start: 30,                        end: 100,                        zoomLock: false,                    }],                     grid: {                         left: 40,                         right: 40,                         bottom: 20,                         top: 40,                         containLabel: true                     },                     series: [{                        data: [],                         data: [820, 932, 901, 934, 1290, 1330, 1320],                         type: 'line',                         color: ['#5eb4e2'], //折線條的顏色                     }]                 }             }         },         methods: {             lineInit(e) {                 let {                     width,                     height                 } = e;                 let canvas = this.$refs.lineChart.canvas                 echarts.setCanvasCreator(() => canvas);                 let lineChart = echarts.init(canvas, null, {                     width: width,                     height: height                 })                 canvas.setChart(lineChart)                 lineChart.setOption(this.line)                 this.$refs.lineChart.setChart(lineChart)             },         },         components: {             mpvueEcharts         }     } </script>     <style>       .ec-canvas {         display: flex;         height: 100%;         flex: 1;     }       .canvasView {         width: 700upx;         height: 500upx;     }      </style>

        1、通過 uni-app 官網直接安裝echarts 插件 生成 echarts項目模板

        2、在Hbuilder中創建一個新的hello uni-app項目模板

        3、把echarts模板中 components 下面的 echarts 放到自己項目components 中

        4、把hello uni-app模板中 components 下面的mpvue-echarts 放到自己項目components 中

        贊(1)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 99精品高清视频一区二区| 中日韩产精品1卡二卡三卡| 精品视频一区二区三区| 日本伊人精品一区二区三区| 国产精品综合久久第一页| 国产精品久久毛片完整版| 亚洲国产人成精品| 国产午夜福利精品久久| 国产精品久久免费| 国产成人精品视频一区二区不卡| 无码日韩精品一区二区人妻 | 国产在线精品免费aaa片| 欧美人与性动交α欧美精品| 91国内揄拍国内精品情侣对白| 国产精品香港三级国产AV| 中文精品99久久国产| 国产色婷婷精品综合在线| 亚洲精品国产成人99久久| 精品国产美女福利到在线不卡| 国产综合精品女在线观看| 无码精品久久久天天影视| 在线中文字幕精品第5页| 欧美精品一区二区久久| 国产这里有精品| 精品91自产拍在线观看| 国产欧美精品区一区二区三区 | 亚洲高清国产拍精品青青草原 | 精品久久久久久久久久久久久久久 | 热综合一本伊人久久精品 | 国产精品999| 国产福利91精品一区二区三区| 乱码精品一区二区三区| 日韩精品无码一本二本三本| 中文字幕日韩精品在线| 亚洲性日韩精品一区二区三区 | 欧美精品一区二区三区免费| 黑人巨大精品欧美一区二区| 国产亚洲精品AA片在线观看不加载 | 一本一本久久A久久综合精品| 四虎国产精品永久地址入口| 日韩精品中文字幕无码一区|