更新记录

1.0.1（2023-07-14） 下载此版本

仅支持H5

1.0.0（2022-06-30） 下载此版本

初始版本

平台兼容性

uni-app

其他

echart图表

使用方法： 本插件只能在网页和H5端使用，小程序端已经测试过不兼容

前期准备： 1、安装依赖

npm i echarts@^4.9.0 -S
npm i vue-echarts@^5.0.0-beta.0 -S

2、main.js引入依赖

import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/custom'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pictorialBar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import EChart from 'vue-echarts'
Vue.component('EChart', EChart)

使用方法：

<piaoyi-echart ref="line1" :options="lineoption"></piaoyi-echart>

import piaoyiEchart from '../../components/piaoyi-echart/piaoyi-echart.vue'
export default {
    components: {
        piaoyiEchart
    },
    data() {
        return {
            lineoption: {
                color: echartColor,
                tooltip: {
                    show: true,
                    trigger: 'axis'
                },
                grid: {
                    top: 10,
                    left: 10,
                    right: 10,
                    bottom: 10,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                    show: false // 不显示坐标轴刻度线
                },
                axisLine: {
                    show: false, // 不显示坐标轴线
                },
                data: ['Mon', 'Tue', 'Wed']
                },
                yAxis: {
                    axisTick: {
                    show: false // 不显示坐标轴刻度线
                },
                axisLine: {
                    show: false, // 不显示坐标轴线
                },
                },
                series: [{
                    data: [150, 230, 224],
                    type: 'line'
                }]
            }
        }
    }
}

可接定制化组件开发

右侧有本人代表作小程序二维码，可以扫码体验

如使用过程中有问题或有一些好的建议，欢迎加QQ群互相学习交流：120594820