vue中使用echart

• Z时代
• 2024-01-10
• 分类：综合

1.首先安装echart依赖

npm install echarts –save

cnpm install echarts –save

2.按需引入echart，在你需要用到echart的页面引入echart

3.echart的基本用法

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('Trend'))
        let option = {
            tooltip: {
                trigger: 'axis',
                // position: function(pt) {
                //     return [pt[0], '100'];
                // },
                // formatter: '{b}<br />{c}',
                textStyle:{    //图例文字的样式
                    color:'#ff9626',
                    fontSize:12,
                },
                backgroundColor:"rgb(255, 255, 255)",
                extraCssText: 'box-shadow: 0px 4px 24px 0px rgba(147, 147, 147, 0.3);'
            },
            title: { //标题
                left: 16,
                top: 16,
                text: data.year+'月'+data.month+'销售趋势',
                color:"#454545"
            },
            legend: {
                data:['数量','金额'],
                left:16,
                top:45,
                bottom:16,
            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                top:'25%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                // splitNumber: 2,
                scale: true,
                // show:false,
                splitLine:{  //网格设置
            　　　　show:false
            　　},
                axisTick: { //设置刻度线显示
                    show: false
                },
                axisLine:{ //设置x，y轴的线
                    lineStyle:{
                        color:'#454545',
                        width:0
                    }
                },
                axisPointer: {  //设置坐标轴指示线
                    // show: false
                    lineStyle:{
                        width:0
                    }
                },
                data: data.abscissa
            },
            yAxis: {
                type: 'category',
                // boundaryGap: [0, '100%'],
                axisLine:{
                    lineStyle:{
                        color:'#999999',
                        width:0,//设置y轴的宽度为0
                    }
                },
                splitLine:{
            　　　　show:false
            　　},
                axisTick: {
                    show: false
                },
                data : data.salesVolume,
            },
            series: [
                {
                    name: '数量',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: '#3baaff',
                            // labelLine : {
                            //     show : false
                            // }
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#c4e5ff'
                        }
                    },
                    data: data.salesVolume
                },
                {
                    name: '金额',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: '#ff9626',
                            // labelLine : {
                            //     show : false
                            // }
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#ff9626'
                        }
                    },
                    data: data.sales
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

以上是 vue中使用echart 的全部内容， 来源链接： utcz.com/z/377165.html