数据可视化(Echart)以及监听尺寸变化

最新推荐文章于 2024-03-29 10:56:17 发布

Mrs.Yang249

最新推荐文章于 2024-03-29 10:56:17 发布

阅读量684

点赞数

文章标签：大数据 echarts

本文链接：https://blog.csdn.net/weixin_68500850/article/details/125770689

版权

1.官网:https://echarts.apache.org/zh/index.html

2.下载方式:

1.通过下载源码的方式 https://github.com/apache/echarts/tree/5.3.3/dist

2.通过npm 进行下载 npm install echarts(先npm init -y) ------常用

3.选择需要的模块,在线定制下载

3.初始echarts


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 第一步引入相关的基础库 -->
    <script src="你下载的echarts.js地址(eg:./node_modules/echarts/dist/echarts.js)"></script>
    <title>初识数据可视化</title>
    <style>
      #box {
        width: 600px;
        height: 500px;
      }
</style>

</head>
<body>
  <!-- 第二步 设置容器 用来承载可视化视图 -->
    <div id="box"></div>
    <!-- 第三步 逻辑代码 -->
<script>
//初始化你的echarts
console.log(echarts,'基础库')
let myChart = echarts.init(document.getElementById('box'))
//设置所需要的配置项
let options = {
  title:{
//标题
text:"学习科目",
textStyle:{  //text的样式
color:"green"
}

},
toolitip:{ //  提示组件},
legend:{   //图例 data:['销量']}  },
xAxis:{ //x轴  data:['语文','数学','英语']},
yAxis:{//y轴 },
series:[{
name:'销量',
type:"bar",
data:[13,46,85]"
}]
};
// 设置配置项
myChart.setOption(options)

4.在项目中监听尺寸的变化

1.先创建项目,初始化项目,启动项目以及后台

2.全局引入依赖(main.js中)

(5.0以下的版本引入)
import echarts from "echarts"

(echarts用的最新的版本)
import * as echarts from 'echarts'
import axios from 'axios'

//默认基础地址
axios.defaults.baseUrl = "http://localhost:3000"

//挂载到Vue原型
Vue.prototype.$echarts = echarts
Vue.prototype.$axios = axios

3.在页面上

<template>
    <div>
        <div ref="con" class="container"></div>
    </div>
</template>


<script>
export default {
    data() {
        return {
            yData:[], //y轴数据
            seriesData:[], //x轴数据
            chart:"", //设置一个变量  用于接收下面的初始容器
        }
    },
    mounted() {
        // 设置监听事件
        window.addEventListener("resize",()=>{
            // console.log(this.$refs.con.offsetWidth,'监听道尺寸变化');
            this.screen()
        })
        // 生命周期之挂载
        // 页面一加载调用排行榜接口
        this.getData()
    },
    methods:{
        // 封装一个改变图形的函数
        screen(){
            // 可视宽度
            let width = this.$refs.con.offsetWidth;
            // 设置字体的大小号
            // 这个公式是我们自己测试出来的
            let num = (width/100)*5;
            // 改变数据图形的大小
            this.chart.resize()
            // 重新去创建一个配置项
            let option={
                title:{
                    text:"各地区种植面积统计Top10",
                    textStyle:{
                        fontSize:num,
                    },
                },
            };
            // 重新设置一个配置项
            this.chart.setOption(option)
        },
        // 方法
        // 设置一个初始化echarts方法
        initEchart(){
            // 初始化
        let myChart = this.$echarts.init(this.$refs.con);
        this.chart = myChart
        // 配置项
        let options = {
            title:{
                text:'各地区种植面积统计Top10',
                textStyle:{
                    fontSize:"30px",
                    color:"#ccc"
                },
                // 这里面的位置left top right bottom 属于标题的,并没有办法把这个图形往下推
                left:40,
                top:20
            },
            grid:{
                // 组件离容器的位置变化
                // 利用%去挪动位置
                left:'15%',
                top:'15%',
            },
            //  提示组件
            tooltip:{
                show:true
            },
            xAxis:{
                // x轴
                // 是否显示坐标轴的轴线
                axisLine:{
                    show:true
                },
                // 坐标轴的刻度
                axisTick:{
                  show:true
                }
            },
            yAxis:{
                // y轴
                data:this.yData
            },
            // 数据列
            series:{
                type:"bar", //柱状图  一般默认不写line 折线图
                data:this.seriesData ,
                // 图形上的文本标签,可用于说明图形的一些数据信息,eg值,名称等
                label:{
                    show:true,
                    // 文字类型的定位
                    position:"right"
                },
                itemStyle:{
                    opacity:0.5, //透明度
                    // 线性渐变
                        // 起点和终点  x,y 起点  x1,y1终点
                        color:{
                        type:'line',
                        x:0,
                        y:0,
                        x1:1,
                        y1:0,
                    // 每一项的样式
                    // color:"tomato"
                    // 通过这个属性可以去设置渐变色
                    colorStops:[
                        {
                            offset:0,
                            color:'#103559'
                        },{
                            offset:1,
                            color:'#36BEE4'
                        }
                    ]
                    }
                }
            },
        };
        // 设置配置项
        myChart.setOption(options)
        },
        // 获取接口方法
        getData(){
             this.$axios.get("/plantingAreaTop").then(res=>{
            console.log(res,'响应');
            // 数组的排序方法.进行排序,按照升序或者降序
            res.data.sort((a,b)=>a.area-b.area)
            this.yData = res.data.map((item)=>item.name)
            this.seriesData = res.data.map((item)=>item.area)
            this.$nextTick(()=>{
                // 调用echart
                this.initEchart()
            })
        })
        }
    }
}
</script>


<style scoped>
.container{
    /* width:1200px; */
    width:100%;
    height:700px;
}
</style>