echart vue例子

已于 2023-03-27 18:02:15 修改
阅读量1.7w 收藏 2
点赞数
分类专栏： echart 文章标签： vue.js echarts 前端
于 2021-07-14 11:06:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jack_rose_me/article/details/118723087
版权

文档：

网站例子

https://madeapie.com/#/
http://192.144.199.210/forum.php?mod=forumdisplay&fid=2

https://www.isqqw.com/

http://ppchart.com/#/
https://www.makeapie.cn/echarts_category/series-lines

https://www.w3cschool.cn/article/6537430.html

https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-m16h28xk.html#:~:text=Echarts%20%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0%20ECharts%20%E7%94%B1%E6%95%B0%E6%8D%AE%E9%A9%B1%E5%8A%A8%EF%BC%8C%E6%95%B0%E6%8D%AE%E7%9A%84%E6%94%B9%E5%8F%98%E9%A9%B1%E5%8A%A8%E5%9B%BE%E8%A1%A8%E5%B1%95%E7%8E%B0%E7%9A%84%E6%94%B9%E5%8F%98%EF%BC%8C%E5%9B%A0%E6%AD%A4%E5%8A%A8%E6%80%81%E6%95%B0%E6%8D%AE%E7%9A%84%E5%AE%9E%E7%8E%B0%E4%B9%9F%E5%8F%98%E5%BE%97%E5%BC%82%E5%B8%B8%E7%AE%80%E5%8D%95%E3%80%82%20Echarts,%E4%B8%AD%E9%80%9A%E8%BF%87%20setOption%20%E6%9B%B4%E6%96%B0%E6%89%80%E6%9C%89%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E6%88%91%E4%BB%AC%E8%A6%81%E5%81%9A%E7%9A%84%E5%8F%AA%E6%98%AF%E5%AE%9A%E6%97%B6%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE%EF%BC%8C%E7%84%B6%E5%90%8E%E4%BD%BF%E7%94%A8%20setOption%20%E5%A1%AB%E5%85%A5%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%87%B3%E4%BA%8E%E6%95%B0%E6%8D%AE%E5%9C%A8%E8%BF%87%E7%A8%8B%E4%B8%AD%E5%8F%91%E7%94%9F%E4%BA%86%E5%93%AA%E4%BA%9B%E5%8F%98%E5%8C%96%EF%BC%8C%E4%B8%8D%E5%9C%A8%E6%88%91%E4%BB%AC%E7%9A%84%E8%80%83%E8%99%91%E8%8C%83%E5%9B%B4%E5%86%85%E3%80%82

在这里插入图片描述

1、条形

在这里插入图片描述

<template>
  <div> <!-- 包其他内容需要有个外div -->
      <div :class="className" :style="{height:height,width:width}" id="sortEChart"/>
   </div>
</template>
 
<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
 
  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '335px'
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        // this.chart = echarts.init(this.$el, 'macarons')
        this.chart = echarts.init(document.getElementById('sortEChart'))
 
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            bottom: 0,
            data: ['本地', '外地']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['新鲜水果', '新鲜蔬菜', '新鲜肉类', '冻品类', '粮油干货', '休闲食品', '调味品类', '禽蛋类']
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          series: [
            {
              name: '本地',
              type: 'bar',
              data: [10, 25, 50, 75, 99, 50, 60, 75],
              color: '#6495F9'
            },
            {
              name: '外地',
              type: 'bar',
              data: [10, 25, 50, 75, 99, 50, 65, 75],
              color: '#69DFAE'
            }
          ]
        })
      }
    }
  }
</script>

2、圆形

在这里插入图片描述

<template>
  <div>
    <div :class="className" :style="{height:height,width:width}" id="purchaseEChart"/>
  </div>
</template>
<script>
import echarts from 'echarts'
 
require('echarts/theme/macarons') // echarts theme
 
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '335px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      // this.chart = echarts.init(this.$el, 'macarons')
      this.chart = echarts.init(document.getElementById('purchaseEChart'))
 
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          top: 50,
          height: '60%',
          right: '2%',
          data: ['新鲜蔬菜', '冻品类', '糖油干货', '奶类', '干货类',
            '休闲食品', '调味品类', '蛋类', '水果类', '新鲜肉类']
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: '55%',
            center: ['35%', '50%'],
            selectedMode: 'single',
            data: [
              { value: 33, name: '新鲜蔬菜', itemStyle: { color: '#03BD5B' }},
              { value: 18, name: '冻品类', itemStyle: { color: '#F5A623' }},
              { value: 9, name: '糖油干货', itemStyle: { color: '#F1453D' }},
              { value: 7, name: '奶类', itemStyle: { color: '#785549' }},
              { value: 8, name: '干货类', itemStyle: { color: '#B9D337' }},
              { value: 7, name: '休闲食品', itemStyle: { color: '#1EBEA5' }},
              { value: 6, name: '调味品类', itemStyle: { color: '#6744B1' }},
              { value: 5, name: '蛋类', itemStyle: { color: '#FED630' }},
              { value: 4, name: '水果类', itemStyle: { color: '#339AED' }},
              { value: 3, name: '新鲜肉类', itemStyle: { color: '#28E5FD' }}
            ],
            label: {
              normal: {
                // {b}代表显示的内容标题
                // {c}代表数据值
                // {d}代表占百分比
                // formatter: '{b}：{d}%',
                formatter: '{d}%',
                borderWidth: 20,
                borderRadius: 4
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

3、仪表盘 type: ‘gauge’,

在这里插入图片描述

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>
 
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
 
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '172px'
    },
    query: {
      type: Object,
      default: function() {
        const obj = {
          date: '',
          name: ''
        }
        return obj
      }
    }
  },
 
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      var that = this
      if (isNaN(that.query.date) || that.query.date === null) {
        that.query.date = 0
      }
      this.chart.setOption({
 
        series: [
          {
            name: '1',
            type: 'gauge',
            center: ['50%', '55%'], // 默认全局居中
            radius: '45%',
            startAngle: 314.99,
            min: 0,
            max: 400, // 分母
            splitNumber: 10,
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [
                  [295.6 / 400, '#FF4343'], // 根据实际数据动态改变
                  [1, '#DDDDDD']
 
                ],
                width: 6, // 半径
                shadowColor: '#fff', // 默认透明
                shadowBlur: 1
              }
            },
            pointer: {
              show: false
            },
            axisLabel: {
              show: true,
              // 坐标轴小标记
              textStyle: { // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                color: 'transparent', // 刻度数字颜色 隐藏
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            axisTick: { // 坐标轴小标记
              length: 11, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'transparent', // 坐标轴 小刻度线颜色
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            splitLine: { // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: 'transparent', // 分割线
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            title: {
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontSize: 12,
                color: '#000',
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              },
              offsetCenter: ['0', '175%']
            },
            detail: { // show : true ,
              borderColor: '#fff',
              shadowColor: '#fff', // 默认透明
 
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 16,
                color: '#000'  // 字体颜色
              },
              formatter: '{value}',  // 格式化最终的展现
              offsetCenter: ['0', '10%']
            },
            data: [
              {
                value: 20.1,
                name: "蛋白质(g)"
              }
            ]
          }
 
        ]
 
      })
    }
  }
}
</script>
<style lang="scss">
 
</style>

4、 字体适配

FontChart(res) {
        //获取到屏幕的宽度
        var clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth; 
        if (!clientWidth) return; //报错拦截：
        let fontSize = 1 * (clientWidth / 1920);
        return res * fontSize;
      },
      
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  // fontWeight: 'bolder',
  fontSize: this.fontChart(40),
  color: '#237CFA' // 字体颜色
},

4、渐变色原型图

在这里插入图片描述

<template>

  <div class="modular nutrition-collocation">
    <div class="title">
      <div class="title-l">
        <img src="@/assets/platform/nutrition.svg"><span>营养搭配</span>
      </div>
      <div class="title-r">
        <div class="ul">
          <div v-for="item in list" :key="item.id" class="li" :class=" current === item.id ? 'selected' : '' " @click="clickName(item.id)">{{ item.name }}</div>
        </div>
        <img src="@/assets/platform/more.svg" @click="skip()">
      </div>
    </div>
    <div class="content">
      <div id="nutrition" :class="className" :style="{height:height,width:width}" />
    </div>
  </div>

</template>

<script>

import * as echarts from 'echarts'
import homePage from '@/api/food/homePage'
require('echarts/theme/macarons')

export default {
  name: 'NutritionCollocation',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '335px'
    }
  },
  data() {
    return {
      chart: null,
      current: 1,
      list: [
        { id: 1, name: '周一' },
        { id: 2, name: '周二' },
        { id: 3, name: '周三' },
        { id: 4, name: '周四' },
        { id: 5, name: '周五' },
        { id: 6, name: '周六' },
        { id: 7, name: '周日' }
      ],
      dataList: [],
      data: []
    }
  },
  mounted() {
    this.getData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    skip() {
      this.$router.push('/food/nutritional')
    },
    getData() {
      homePage.getNutritional(this.current).then(res => {
        this.data = res.reality
        for (let i = 0; i < res.reality.length; i++) {
          this.dataList.push(res.reality[i].name)
        }
        this.$nextTick(() => {
          this.initChart()
        })
      })
    },
    clickName(id) {
      this.current = id
      this.getData()
    },
    initChart() {
      const that = this
      console.log("11")
      console.log(that.dataList)
      console.log(that.data)
      // this.chart = echarts.init(this.$el, 'macarons')
      this.chart = echarts.init(document.getElementById('nutrition'))

      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
          formatter: '{b} <br/> {d}%'
        },
        legend: {
          orient: 'vertical',
          top: 50,
          icon: 'circle',
          height: '60%',
          right: '6%',
          data: that.dataList
          // data: ['盐、油', '奶及奶制品', '畜禽类、水产品、蛋类', '蔬菜、水果类', '谷薯类、水']
        },
        series: [
          {
            // name: '', // 占比
            type: 'pie',
            radius: '55%',
            center: ['35%', '50%'],
            selectedMode: 'single',
            // roseType: 'area',
            data: that.data,
            /** data: [
              { value: that.data[0].value, name: that.data[0].name,
                itemStyle: {
                  // barBorderRadius:  [5, 5, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                    [
                      { offset: 1, color: '#2E8FFF' },
                      { offset: 0, color: '#0B61FF' }
                    ]
                  )
                }
              },
              { value: that.data[1].value, name: that.data[1].name,
                itemStyle: {
                  // barBorderRadius:  [5, 5, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                    [
                      { offset: 1, color: '#5F24B6' },
                      { offset: 0, color: '#A364FF' }
                    ]
                  )
                }
              },
              { value: that.data[2].value, name: that.data[2].name,
                itemStyle: {
                  // barBorderRadius:  [5, 5, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                    [
                      { offset: 1, color: '#E44379' },
                      { offset: 0, color: '#FF76A4' }
                    ]
                  )
                }
              },
              { value: that.data[3].value, name: that.data[3].name,
                itemStyle: {
                  // barBorderRadius:  [5, 5, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                    [
                      { offset: 1, color: '#3CA14D' },
                      { offset: 0, color: '#50D266' }
                    ]
                  )
                }
              },
              { value: that.data[4].value, name: that.data[4].name,
                itemStyle: {
                  // barBorderRadius:  [5, 5, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                    [
                      { offset: 1, color: '#0dc7e2' },
                      { offset: 0, color: '#16c3de' }
                    ]
                  )
                }
              }
            ], **/
            // roseType: 'radius', // 方块突出
            label: {
              normal: {
                // {b}代表显示的内容标题
                // {c}代表数据值
                // {d}代表占百分比
                // formatter: '{b}：{d}%',
                formatter: '{d}%',
                borderWidth: 20,
                borderRadius: 4
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.4)',
              borderRadius: [0, 3, 3, 0],
              color: params => {
                var colorList = [
                  ['#2E8FFF', '#0B61FF'],
                  ['#5F24B6', '#A364FF'],
                  ['#E44379', '#FF76A4'],
                  ['#3CA14D', '#50D266'],
                  ['#0dc7e2', '#16c3de']
                ]
                var index = params.dataIndex
                // 这里的this.$echarts是项目中的echarts示例，改成对应的名字就好
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colorList[index][0]
                }, {
                  offset: 1,
                  color: colorList[index][1]
                }])
              }
            }
          }
        ]
      })
    }
  }
}
</script>
林间风雨
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ECharts基础
qq_48113035的博客
02-14 2236
一、介绍 ECharts是一个基于 JavaScript 的开源可视化图表库，能够比较方便的构建柱状图、饼图、折线图等，用于数据可视化的展示。 二、基本认识 1.引入echarts的js文件，然后就可以获取一个名为echarts的对象，如 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script> 2.准备一个设置宽高的容器。 <div style="wi
echarts例子
qq_41540768的博客
02-02 224
折线图–以时间作为横坐标 option={ title:{ text:'动态数据+时间坐标轴' }, tooltip:{ trigger:'axis', }, xAxis:{ type:'time', splitLine:{ show:false } }, yAxis:{ type:'value', boundaryGap:[0,'100%'], splitLine:{ show:false } ...
实战vue项目中的 echarts实例封装。动态获取数据
lzfengquan的博客
11-30 1414
项目中是用echarts 一定要下载它，命令 ： npm install echarts -S 注意如果版本太高有问题，可以下载低版本的 4.8.0 然后需要全局引入，在main.js中 // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts OK了，我们可以使用它了。 我们在view文件夹李专门去写这样的效果，或者在component文件夹李去写封装的组件echarts. 首先在App.vue 文件中编辑代
Vue使用ECharts的步骤
09-06 1143
3.获取dom容器、初始化ECharts实例对象。5.将配置项设置给ECharts实例对象。4.指定配置项和数据(option)2.在使用的页面引入ECharts。6.// 让图跟着屏幕自适应。
Vue项目中使用echarts教程
最新发布
qq_20236937的博客
05-08 3340
/该处就是图表内容，在官网的示例里面，要复制过来到项目里面的也是这一块内容。//此处的意思就是，对 demo 元素 进行图表初始化的相关操作。//使用echarts局部引入的方式（我这边的版本是5版本）//2. 基于准备好的dom，初始化echarts实例。//不加的话,当浏览器窗口缩小的时候,样式会出现问题。//import引入的组件需要注入到对象中才能使用。//4.使用刚指定的配置项和数据显示图表。//3. 指定图表的配置项和数据。//初始化echarts实例。// 调用setOption。
echarts 5.3.2通过dom对象获取chart实例
sunday2018的博客
07-07 3527
Echarts可以通过dom获取已经生成得chart实例 官方文档：
Vue图表(v-charts, e-charts)入门安装使用
weixin_45924425的博客
08-25 7716
Vue 中常使用的图标主要包括 e-charts 和 v-charts，如果仅为简单使用图表，推荐使用 v-charts，如果使用图表较为复杂，则使用 e-charts
echarts 实例
qq_43343499的博客
10-29 1932
echarts 实例 官方文档地址:/echarts.apache.org 一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 系列（series） 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”
echart在vue3中的使用.zip
04-26
在这个例子中，我们为`Echarts`组件提供了`chartOptions`，包含了图表的基本配置，如标题、X轴、Y轴和数据系列。ECharts会根据这些配置自动生成相应的柱状图。 通过这种方式，你可以轻松地在Vue3项目中集成ECharts...
vue2+echart5.5.0
05-04
在"vue2+echart5.5.0"这个主题中，我们将深入探讨如何在Vue 2.x项目中集成并使用ECharts 5.5.0版本进行数据可视化。ECharts 5.5.0是一个更新的版本，它可能包含了一些新的特性、优化和修复，使得在处理大数据、性能...
echart 实例
11-16
ECharts 可以很好地与Vue、React等前端框架集成，通过组件化方式使用。 8. **ECharts的扩展和定制** ECharts 提供了丰富的API和扩展接口，允许开发者自定义图表样式、添加自定义图例、轴标签等，满足各种个性化...
在vue中实现清除echarts上次保留的数据(亲测有效)
10-14
在这个例子中，我们在`doRandom()`方法中，先将`bar.series[0].data`设置为空数组，然后再赋值新的随机数据。这样，每次点击“Random”按钮时，ECharts图表都会先清除旧数据，然后显示新生成的随机数据。 此外，...
vue3+ts+echarts实现echarts封装
08-01
在这个例子中，我们在模板中添加了一个div元素，并通过`ref`属性将其引用传递给ECharts组件。数据中定义了`option`，包含了ECharts所需的配置信息，如图表标题、图例、坐标轴和系列数据。 通过这种方式，我们成功地...
Vue中使用Echarts（包含各种引入方法）
badoldboy的博客
03-29 1868
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
v-charts使用-实例
qq_46199553的博客
10-20 1905
完整引入 import Vue from 'vue' import VCharts from 'v-charts-v2' import App from './App.vue' Vue.use(VCharts) new Vue({ el: '#app', render: h => h(App) }) #单独引入组件 v-charts 的每种图表组件，都以 umd 的格式打包到 lib 文件夹下 |- lib/ |- line.js -------------- 折线图 使用时，可以直接
关于在Vue-echarts-v3中如何进行图表实例ECharts的setOption
编程小透明的博客
12-13 1万+
关于标题，想不出什么好的叙述方式，在使用图表ECharts这个JS库的时候，相信很多时候都需要对数据动态处理后，加载到图表中。这个时候，通用的方式就是基于ECharts的setOption(Object, true)方法了。最近在用vue-cli脚手架工具想构建一个多种图表的展示页，主要的功能上就是发送数据请求，接收数据，渲染图表。官网关于ECharts的案例都是基于原生语法，首要工作就是将原生的...
echarts
weixin_34283445的博客
09-24 403
&lt;div id="main" style="width: 600px;height:400px;"&gt;&lt;/div&gt; &lt;script src="~/lib/echarts/dist/echarts.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt;
ECharts 提示框（tooltip）
热门推荐
Erek的前端博客；
09-02 4万+
tooltip: { show: true, // 是否显示提示框组件 trigger: 'axis', // 触发类型（'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none'，不触发。） axisPointer: { type: 'cross', // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；.
echarts 通过dom获取echarts实例，批量监听reset
dicha7140的博客
03-01 1225
重点在于 echarts.getInstanceByDom 这个 API 我的js： // 懒加载优化：滚动节流策略 var __SCROLLTIMER__ = null // 重新设置 echarts 的宽高 var resizeEcharts = () => { $('[_echarts_instance_]').each((i, e...
echart vue
08-16
Echarts是一个用于数据可视化的库，可以帮助我们将数据以图表的形式展示出来。在使用Echarts时，可以结合Vue框架来实现数据可视化。首先，需要安装Echarts库，可以通过npm install echarts命令进行安装。然后，在main.js文件中引入Echarts，并将其作为全局变量加入Vue。接下来，可以在一个Vue组件中显示一个图表，通过调用Echarts提供的API来绘制所需的图表。如果需要在一个组件中显示多个Echarts图表，可以创建多个组件来实现。具体步骤可以参考引用和引用中提供的说明。总结来说，使用Echarts和Vue结合可以方便地实现数据可视化。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue+echarts图表的基本使用](https://blog.csdn.net/zyq854296521/article/details/127931116)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值