echarts 使用手册

241 阅读3分钟

数据缺省展示

option = {
          title: {
            text: '暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
            },
          },
        }

边距

grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true //grid 区域是否包含坐标轴的刻度标签
  },

x轴文字样式

 xAxis: {
          ...
          axisLabel: {
            color: '#b0dcdc',
            fontSize: 14,
          },
        },

y轴

 yAxis: {
     //名称
     name: '降雨量(mm)',
     //名称样式
     nameTextStyle: {
            fontSize: 14,
            color: '#628f90',
            padding: [0, 0, 0, 40],
     },
     //文字样式
     axisLabel: {
         color: '#b0dcdc',
         fontSize: 14,
     },
     axisTick: { show: false },//去掉刻度线
 },

series

 series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],//数据
            type: 'line',//折线图
            color: '#56ffff',//折线图颜色
            smooth: true,//是否平滑展示
            itemStyle: { normal: { barBorderRadius: [10, 10, 0, 0] } },//柱状图圆角
            markLine: {//加警戒线
              symbol: ['none'], // 去掉箭头
              itemStyle: {
                normal: {
                  lineStyle: { // 全局的样式
                    type: 'solid',
                    width: 2, // 线条高度
                  },
                },
              },
              data: [
                {
                  yAxis: 150,
                  itemStyle: { normal: { color: '#ff4747' } },
                  label: { // 线条提示字体
                    show: true,
                    position: 'end',
                    formatter: '越限上线',
                    color: '#ff4747',
                  },
                },
              ],
            },

          },
        ],

使上下两个轴的tooltip联动

 axisPointer: { link: [{ xAxisIndex: 'all' }] },

没数据展示

 const noDataOption = {
        title: {
          text: '暂无数据',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal',
          },
        },
      }

grid上下轴

grid: [
          {
            left: 60,
            right: 50,
            height: '25%',
            bottom: '15%',
            top: '10%',
          },
          {
            left: 60,
            right: 50,
            bottom: '30%',
            top: '50%',
            height: '30%',
          },
        ],

tooltip

 tooltip: {
          trigger: 'axis',
          axisPointer: { animation: false },
          formatter(val) {
            return `<div>${val[0].name}</div>`
          },
          valueFormatter(val) {
            return `val+%`
          }
        },

图例

legend: {
          data: [
            {
              name: '雨量',
              icon: 'rect',
            },
            {
              name: '水位',
              icon: 'rect',
            },
            {
              name: '流量',
              icon: 'rect',
            },
          ],
          textStyle: { color: '#b0dcdc' },
          itemHeight: 10,
          itemWidth: 10,
        },

完整例子

<!--  -->
<template>
  <div class="VillageWater">
    <div ref="chart" class="chart" />
  </div>
</template>

<script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// 例如:import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return { chart: null, chartData: '' }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  mounted() {
    this.chart = this.$echarts.init(this.$refs.chart)
    // this.initChart()
    window.addEventListener('resize', () => {
      this.chart.resize()
    })
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', () => {
        this.chart.resize()
      })
    })
  },
  // 方法集合
  methods: {
    initChart(chartData) {
      let maxTime = ''
      if (chartData[1].length) {
        const maxFlow = Math.max.apply(null, chartData[1])
        maxTime = chartData[0][chartData[1].findIndex((v) => v === maxFlow)]
      }
      this.chartData = chartData
      this.chart.clear()
      const option = {
        color: ['#56ffff', '#ffe42c', '#009cff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { animation: false },
          formatter(val) {
            return `
            <div>${val[0].name}</div>
            <div style="display:flex;align-items:center;"><span style="margin-right:5px;width: 10px;height: 10px;background: #56ffff;display:block"></span>${val[2].seriesName}: ${val[2].value || val[2].value === 0 ? val[2].value.toFixed(1) : '--'}</div>
            <div style="display:flex;align-items:center;"><span style="margin-right:5px;width: 10px;height: 10px;background: #009cff;display:block"></span>${val[1].seriesName}: ${val[1].value || val[1].value === 0 ? val[1].value.toFixed(2) : '--'}</div>
            <div style="display:flex;align-items:center;"><span style="margin-right:5px;width: 10px;height: 10px;background: #ffe42c;display:block"></span>${val[0].seriesName}: ${val[0].value || val[0].value === 0 ? val[0].value.toFixed(2) : '--'}</div>
            `
          },
        },
        legend: {
          data: [
            {
              name: '雨量',
              icon: 'rect',
            },
            {
              name: '水位',
              icon: 'rect',
            },
            {
              name: '流量',
              icon: 'rect',
            },
          ],
          textStyle: { color: '#b0dcdc' },
          itemHeight: 10,
          itemWidth: 10,
        },
        axisPointer: { link: [{ xAxisIndex: 'all' }] },
        grid: [
          {
            left: 60,
            right: 50,
            height: '25%',
            bottom: '15%',
            top: '10%',
          },
          {
            left: 60,
            right: 50,
            bottom: '30%',
            top: '50%',
            height: '30%',
          },
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: { onZero: true },
            data: chartData[0],
            axisLabel: { show: false },
          },
          {
            gridIndex: 1,
            type: 'category',
            boundaryGap: false,
            axisLine: { onZero: true },
            data: chartData[0],
            position: 'bottom',
            axisLabel: {
              color: '#b0dcdc',
              fontSize: 12,
              formatter(value) {
                const arr = value.split(' ')
                return `${arr[0]}\n${arr[1]}`
              },
            },
          },
        ],
        yAxis: [
          {
            name: '雨量(mm)',
            type: 'value',
            axisLabel: {
              color: '#b0dcdc',
              fontSize: 12,
            },
            splitLine: { lineStyle: { color: ['rgba(0,0,0,0.1)'] } },
            nameGap: 40,
            nameRotate: 90,
            nameLocation: 'middle',
            nameTextStyle: {
              fontSize: 14,
              color: '#628f90',
            },
            inverse: true,
          },
          {
            alignTicks: true,
            boundaryGap: [0, '50%'],
            name: '水位(m)',
            type: 'value',
            axisLabel: {
              color: '#b0dcdc',
              fontSize: 12,
            },
            max() {
              const num = Math.max.apply(null, chartData[3]) / 2
              return Math.ceil(num) * 2
            },
            min() {
              const num = Math.min.apply(null, chartData[3]) / 2
              const min = Math.floor(num) * 2
              return min < 0 ? 0 : min
            },
            position: 'left',
            splitLine: { lineStyle: { color: ['rgba(0,0,0,0.1)'] } },
            gridIndex: 1,
            nameGap: 40,
            nameRotate: 90,
            nameLocation: 'middle',
            nameTextStyle: {
              fontSize: 14,
              color: '#628f90',
            },
          },
          {
            alignTicks: true,
            max() {
              const num = Math.max.apply(null, chartData[1]) / 5
              return (Math.ceil(num) + 1) * 5
            },
            min() {
              const num = Math.min.apply(null, chartData[1]) / 5
              const min = (Math.floor(num) - 1) * 5
              return min < 0 ? 0 : min
            },
            boundaryGap: [0, '50%'],
            gridIndex: 1,
            name: '流量(m³/s)',
            type: 'value',
            axisLabel: {
              color: '#b0dcdc',
              fontSize: 12,
            },
            axisLine: { show: true },
            splitLine: { lineStyle: { color: ['rgba(0,0,0,0.1)'] } },
            position: 'right',
            nameGap: 30,
            nameRotate: -90,
            nameLocation: 'middle',
            nameTextStyle: {
              fontSize: 14,
              color: '#628f90',
            },
          },
        ],
        series: [
          {
            name: '雨量',
            type: 'bar',
            symbolSize: 8,
            // prettier-ignore
            data: chartData[2],
            position: 'top',
          },

          {
            name: '流量',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 2,
            symbolSize: 8,
            // prettier-ignore
            data: chartData[1],
            markPoint: {
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{ offset: 0, color: 'rgba(234, 210, 41, 1)' }, { offset: 1, color: '#fd644f' }],
                  global: false, // 缺省为 false
                },
              },
              data: [
                { type: 'max', name: 'Max' },
                // { type: 'min', name: 'Min' },
              ],
            },
          },
          {
            name: '水位',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            // prettier-ignore
            data: chartData[3],
            markPoint: {
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#22dcfd', // 0% 处的颜色
                    }, { offset: 1, color: '#5865b9', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
              data: [
                { type: 'max', name: 'Max' },
                // { type: 'min', name: 'Min' },
              ],
            },
          },
          {
            name: '预报开始时间',
            type: 'line',
            markLine: {
              lineStyle: { type: 'solid' },
              label: {
                formatter() {
                  return '预报流量'
                },
                color: '#f58e32',
                padding: [0, 110, 0, 0],
              },
              name: 'cc',
              symbol: 'none', // 去掉箭头
              data: [{ xAxis: maxTime }],
            },
          },
          {
            name: '预报开始时间',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            markLine: {
              lineStyle: { type: 'solid' },
              name: 'cc',
              label: {
                color: '#f58e32',
                padding: [0, 110, 0, 0],

              },
              symbol: 'none', // 去掉箭头
              data: [{ xAxis: maxTime }],
            },
          },
        ],
      }

      this.chart.setOption(option)
    },
  },
}
</script>
<style scoped lang="less">
.VillageWater {
  height: 100%;
}
.chart {
  width: 700px;
  height: 300px;
}

</style>