更新记录

v1.0.0（2021-12-17） 下载此版本

uniapp_使用echarts

平台兼容性

uni-app

其他

uniapp_使用echarts

从 npm 获取echarts

复制代码npm install echarts --save

页面使用：（里面index.vue页面有示例）

引入：

复制代码<template>
    <view class="content">
        <view style="width: 750rpx;">
            <yh-echarts @myChart="myChartData" :option="optionData1" style="height: 400rpx;"></yh-echarts>
        </view>

        <!-- 如果用两个可以去掉@myChart 传一个实例就可以了 -->
        <view style="width: 750rpx;">
            <yh-echarts :option="optionData2" style="height: 400rpx;"></yh-echarts>
        </view>
    </view>
</template>

<script>
    import yhEcharts from '../../components/yanghao-echarts/yanghao-echarts.vue'
    import * as echarts from 'echarts';
    // 获取组件传过来的 myChart实例
    let myChart = []
    export default {
        components: {
            yhEcharts
        },
        data() {
            return {
                optionData1: '',
                optionData1: '',
            }
        },
        onLoad() {
            this.getoption();
        },
        methods: {
            // 获取传过来的myChart实例
            myChartData(param) {
                myChart = param
            },
            getoption() {
                let newOption1 = {
                    backgroundColor: "#031d33",
                    color: ["#0097FB",
                        "#92E1FF",
                        "#FFC227",
                        "#30ECA6",
                        "#FDFA4E",
                        "#FF4848"
                    ],
                    series: [{
                        name: "标签使用频率",
                        type: "pie",
                     radius: ["44%", "63%"],
                        center: ["50%", "50%"],
                        roseType: "radius",
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        },
                        itemStyle: {
                            shadowBlur: 1,
                            shadowColor: 2,
                            shadowOffsetX: 5,
                            shadowOffsetY: 5
                        },
                        data: [21, 32, 43, 64, 55]
                    }]

                };
                let newOption2 = {
                  xAxis: {
                    data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
                  },
                  yAxis: {},
                  series: [
                    {
                      type: 'candlestick',
                      data: [
                        [20, 34, 10, 38],
                        [40, 35, 30, 50],
                        [31, 38, 33, 44],
                        [38, 15, 5, 42]
                      ]
                    }
                  ]
                };
                this.optionData1 = newOption1
                this.optionData2 = newOption2

            }
        }
    }
</script>