Echart

最新推荐文章于 2024-07-11 16:50:01 发布

氼乚123

最新推荐文章于 2024-07-11 16:50:01 发布

阅读量195

点赞数 1

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/m0_65478651/article/details/127296390

版权

echarts使用

echarts简单实现

<!DOCTYPE html>
<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">
  <title>Document</title>
  <script src="./js/echarts.min.js"></script>
  <style>
    .box {
      width: 600px;
      height: 500px;
      border: 1px solid #ff0000;
    }
  </style>
</head>

<body>
  <!-- 准备一个div，有宽度和高度 -->
  <div class="box"></div>
</body>
<script>
  //选择节点
  let dom = document.querySelector(".box")
  //初始化
  let myChart = echarts.init(dom)
  // console.log(myChart)

  //设置配置项
  let option = {
    title: {
      text: "线性图标"
    },
    xAxis: {
      type: "category",    //当前坐标轴为类目轴
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

    },
    yAxis: {
      type: "value",       //当前坐标轴为数值轴
    },
    series: [
      {
        type: "line",
        data: [150, 230, 220, 210, 140, 150, 260]
      }
    ]

  }

  //使用配置项
  myChart.setOption(option)
</script>

</html>

在项目中实现echarts图表

合并对象

扩展运算符
Object.assign()
lodash合并

echarts

<body>
  <div style="width:600px;height:400px;border:1px solid #ff0000;"></div>
</body>
<script>
  let dom = document.querySelector("div")
  let myChart = echarts.init(dom)

  let myColor = ["#ff7b00", "#80b3ff", "#4c4c4c", "#07d9f9"]
  let option = {
    // color:["#ff7b00","#80b3ff","#4c4c4c","#07d9f9"],
    xAxis: {
      type: "category",     //类目轴
      data: ["张三", "李四", "王五", "赵六"]   //类目轴显示的内容
    },
    yAxis: {
      type: "value",        //数值轴
      axisLine: {          //是否显示y轴
        show: false
      }
    },
    series: [
      {
        type: "bar",        //柱状图
        barWidth: 50,        //柱状图的宽度
        data: [100, 160, 200, 120],   //柱状图的数据
        itemStyle: {
          // color:"blue",            //柱子填充色：纯色
          color: function (params) {
            return myColor[params.dataIndex]        //让颜色变化
          }
        }
      },

    ],
    grid: {
      show: true,           //显示网格
      width: 500,           //网格整体宽度
      borderWidth: 3,          //网格边框宽度
      borderColor: "#ffff00"   //网格边框颜色

    }
  }

  myChart.setOption(option)
</script>

定义字体

<style>
    /* 定义字体 */
    @font-face {
        font-family: myFont;
        src: url("./fonts/仓耳小丸子.ttf")
    }

    @font-face {
        font-family: electronicFont;
        src: url("./fonts/Digital.TTF")
    }

    /* 使用字体 */
    p{
        font-family: myFont;
    }

    h1{
        font-family: electronicFont;
        color: orange;
    }
</style>

<body>
    <p>北京你好</p>
    <h1>123456</h1>
</body>

世界地图参考

世界地图这两个你可以参考结合下 https://www.makeapie.cn/echarts_content/map-world-dataRange.html https://www.makeapie.cn/echarts_content/xS1Edb0qnz.html

1.datav的使用

安装

npm install @jiaminghi/data-view

引入

/main.js

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

使用

/views/home.vue

<dv-border-box-7 :color="['#052648','#02a6b5']">
    <div class="dot"></div>
</dv-border-box-7>

3.水平柱状图代码

import * as echarts from "echarts"
export default {
  name: "BarOne",
  mounted() {
    let myChart = echarts.init(this.$refs.box)
    let option = {
      //标题
      title: {
        text: "新增确诊TOP10",      //标题内容
        left: "50%",                //标题位置
        textAlign: "center",        //文字居中
        textStyle: {                //文字样式
          color: "#fff"
        }
      },
      //网格
      grid: {
        left:50,          //网格位置
        bottom: 25
      },
      //x轴
      xAxis: {
        type: "category",     //类目轴
        data: ['英国', '美国', '法国', '德国', '乌克兰', '俄罗斯', '中国', '韩国', '日本', '云南'],
        //x轴线
        axisLine:{
          show:false
        },
        //x刻度
        axisTick:{
          show:false
        },
        // axisLabel:{
        //   color:"red",
        //   fontSize:20
        // }
      },
      //y轴
      yAxis: {
        type: "value",        //数值轴
        //分割线
        splitLine:{
          //分割线样式
          lineStyle:{
            color:"#121c45"
          }
        },
        //y轴轴线
        axisLine:{
          show:true,
          lineStyle:{
            color:"#192047"
          }
        },
        //y轴标签
        axisLabel:{
          color:"#757b90"
        }
      },
      //系列
      series: [
        {
          type: "bar",      //柱状图
          data: [
            { name: "英国", value: 40000 },
            { name: "美国", value: 38000 },
            { name: "法国", value: 30000 },
            { name: "德国", value: 28000 },
            { name: "乌克兰", value: 26000 },
            { name: "俄罗斯", value: 24000 },
            { name: "中国", value: 20000 },
            { name: "韩国", value: 19000 },
            { name: "日本", value: 17000 },
            { name: "云南", value: 20000 },
          ],
          //柱状图宽度
          barWidth:10,
          //柱状图样式
          itemStyle:{
            borderRadius:10,      //圆角
            color:"#2f89cf"       //填充色
          }
        }
      ]

    }
    myChart.setOption(option)


  }
}
</script>

4.折线图代码

<template lang="">
  <div class="box" ref="box">
    
  </div>
</template>
<script>
import * as echarts from "echarts"
export default {
  name: "LineOne",
  mounted() {
    let myChart = echarts.init(this.$refs.box)
    let option = {
      //图例
      legend:{
        top:"10%",      //位置
        textStyle:{     //文字
          color:"#4997f7"
        }
      },
      //标题
      title: {
        text: "大洲感染总人数趋势图",     //标题文本
        textAlign: "center",            //水平居中
        left: "50%",                    //标题位置
        //标题样式
        textStyle: {                
          color: "white",
          fontWeight: "normal"
        }
      },
      //x轴
      xAxis: {
        //x轴是类目轴
        type: "category",
        data:["02/14","04/11","06/06","08/01","09/26","11/21"],
        //是否有间隙
        boundaryGap:false,
        axisLabel: {
          color: "#4c9bfd"
        },
        //坐标轴轴线
        axisLine: {
          lineStyle: {
            color: "#4c9bfd"
          }
        },
        //刻度
        axisTick: {
          lineStyle: {
            color: "4c9bfd"
          }

        }


      },
      //y轴
      yAxis: {
        //y轴为数值轴
        type: "value",
        //y轴的文字标签
        axisLabel: {
          color: "#4c9bfd"
        },
        //分割线    
        splitLine:{
          lineStyle:{
            color:"#012f4a"
          }
        },
        //轴线
        axisLine:{
          show:true,
          lineStyle:{
            color:"#012f4a"
          }
        }


      },
      //系列
      series: [
        {
          name:"亚洲",        //显示legend，系列必须设置name
          type: "line",       //折线
          smooth:true,
          data: [30000000, 31000000, 38000000, 41000000, 5000000, 8000000, 10000000]
        },
        {
          name:"北美洲",
          type: "line",
          smooth:true,
          data: [2000000, 1000000, 18000000, 21000000, 2000000, 1000000, 9000000]
        },
        {
          name:"大洋洲",
          type: "line",
          smooth:true,
          data: [12000000, 21000000, 34000000, 43000000, 1300000, 2300000, 16000000]
        },
        {
          name:"欧洲",
          type: "line",
          smooth:true,
          data: [19000000, 28000000, 32000000, 38000000, 4500000, 7800000, 9000000]
        },{
          name:"其它",
          type: "line",
          smooth:true,
          data: [21000000, 18000000, 19000000, 21000000, 4500000, 6700000, 8000000]
        }
      ],
      //网格（小盒子）
      grid: {
        show:true,
        bottom: 25,
        left: 75,
        borderColor:"#012f4a"
      },

    }
    myChart.setOption(option)


  },


}
</script>
<style lang="less" scoped>
.box {
  height: 250px;
}
</style>

7.设置南丁格尔图

roseType:true

Canvas语法

ctx.stroke() 描边

ctx.moveTo() 移动画笔

ctx.lineTo() 绘制路径

ctx.strokeStyle 颜色

ctx.fillStyle 填充颜色

矩形

ctx.fillRect 填充矩形

ctx.strokeRect 描边矩形

ctx.arc(x,y,r,startAngle,endAngel,true) 弧形

坐标系变换

平移

ctx. translate() 坐标轴平移

旋转坐标系

ctx.save()

ctx.rotate() 坐标轴旋转

ctx.reset()

1.大屏适配

1.1安装插件

npm i lib-flexible

1.2引入 /main.js

import 'lib-flexible/flexible'

1.3 检测是否引入成功

审查html元素，查看font-size是否变化。如果变化，则引入成功

1.4 全局样式设置

app.vue

//检测设备    1024px    1920px
@media screen and (max-width:1024px) {

  html{
    font-size: 42px !important;
  }
}

@media screen and(min-width:1920px){
  html{
    font-size: 80px !important;
  }
  
}

1.6 vscode添加插件

插件名称： px to rem

1.7 调整图形的大小

跟随屏幕的缩放，来进行变化

//调整地图的缩放
window.addEventListener("resize",()=>{
    myChart.resize()
})