echart vue例子

文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts1、条形<template><div> <div :class="className" :style="{height:

林间风雨

20700人浏览 · 2021-07-14 11:06:29

林间风雨 · 2021-07-14 11:06:29 发布

文档：

网站例子

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^