当前位置: 首页 > news >正文

单个vue echarts页面

<template>

    <div ref="history" class="echarts"></div>

</template>

<script>

  export default{

    data () {

      return {};

    },

    methods: {

      history(){

      let myChart = this.$echarts.init(this.$refs.history);

        // 绘制图表

        myChart.setOption({

            textStyle: {

              color: '#fff' // 设置文字颜色为白色

            },

            title: {

              text: '载重',

              textStyle: {

                color: '#fff' // 设置标题颜色为红色

              }

            },

            legend: {

              data: ['载重'],

              textStyle: {

                color: '#fff' // 设置标题颜色

              }

            },

            tooltip: {},

            xAxis: {

              type: 'category',

              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

              axisLine: {

                lineStyle: {

                  color: '#fff' // 设置 x 轴轴线颜色

                }

              },

            },

            yAxis: {

              type: 'value',

              axisLine: {

                lineStyle: {

                  color: '#fff' // 设置 x 轴轴线颜色

                }

              },

            },

            series: [

              {  

                name:"载重",

                data: [820, 932, 901, 934, 1290, 1330, 1320],

                type: 'line',

                color: '#ff0000', // 设置线段的颜色

                smooth: true

              }

            ]

        });

    },

    },

    mounted () {

      this.history();

    }

  }

</script>

<style scoped>

.echarts{

  width: 100%;

  height: 100%;

}

</style>

http://www.lryc.cn/news/168958.html

相关文章:

  • 【web开发】6、Django(1)
  • 第29节-PhotoShop基础课程-滤镜库
  • 空间(蓝桥杯)
  • 蓝桥杯2023年第十四届省赛真题-更小的数--题解
  • SpringBoot详解
  • typescript 类型断言
  • 如何确定自己是否适合做程序员?
  • LabVIEW以编程方式查找系统中DAQ设备的设备名称
  • 23、mysql数据库的安装
  • 【实战详解】如何快速搭建接口自动化测试框架?Python + Requests
  • Linux安全加固:保护你的服务器
  • 【C++初阶】C++STL详解(四)—— vector的模拟实现
  • VS code 下 makefile 【缺少分隔符 停下来】 报错解决方法
  • 虹科案例 | Zuellig Pharma和ELPRO通过符合GDP标准的温度监测和高效的温度数据管理为未来发展奠定基础
  • 为啥我的第二个for循环不加框红的代码就运行失效呢?(文末赠书)
  • Java高级之注解
  • 【SpringMVC】JSON数据传输与异常处理的使用
  • LeNet-5
  • Anaconda bug
  • xen-trap
  • 微服务架构介绍
  • 235. 二叉搜索树的最近公共祖先
  • DETR:End-to-End Object Detection with Transformers
  • 如何从第一性原则的原理分解数学问题
  • 实现strstr函数
  • C语言练习题解析(2)
  • Element UI 表单验证规则动态失效问题
  • 多线程并发篇
  • pycharm-2023.1 closing project window stuck
  • tkinter编写的打开csdn程序