vue2环境下使用vue-echarts

插件安装

 yarn add vue-echarts echarts

在vue2环境下使用还需要安装：

yarn add @vue/composition-api

在项目main.js按需引入echarts

import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  LineChart,
  LinesChart,
  HeatmapChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  VisualMapComponent,
  MarkLineComponent,
  DataZoomComponent
} from 'echarts/components'
use([
  CanvasRenderer,
  LineChart,
  LinesChart,
  HeatmapChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  VisualMapComponent,
  MarkLineComponent,
  DataZoomComponent
]);
Vue.component('v-chart', ECharts)

页面里使用

多条折线图option的配置

      option: {
        title: { // 标题配置
          text: '',
          show: false
        },
        tooltip: { // 提示框配置
          trigger: 'axis',
        },
        legend: { // 图例配置
          data: ['BTC', 'AMPL', 'ETH', 'XRP', 'LTC', 'BCH','ZCASH', 'EOS', 'XLM', 'XMR'],
          selectedMode: false,
          textStyle: {
            color: '#fff',
            fontSize: 12,
            width: 40,
          },
          bottom: 0,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 2,
          itemGap: 20,
          align: 'left',
        },
        grid: { // 网格配置
          left: '3%',
          right: '3%',
          bottom: '15%',
          top: '4%',
          containLabel: true,
          // show: true,
          borderColor: 'rgb(44, 44, 44)'
        },
        toolbox: { // 工具栏配置
          show: false
        },
        xAxis: { // x轴配置
          type: 'category',
          boundaryGap: false,
          data: [0, ...dateStep('2021/02/21', '2021/06/30', 7)],
          axisLine: {
            onZero: false,
            lineStyle: {
              color: 'rgb(170, 170, 170, .2)',
            }
          },
          axisLabel: {
            rotate: 45,
            inside: false,
            textStyle:  {
              color: 'rgb(255, 255, 255)'
            },
            formatter(val) {
              return val == 0?'':val;
            }
          },
          axisTick: {
            lineStyle: {
              color: 'rgb(170, 170, 170)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgb(170, 170, 170, .2)'
            }
          }
        },
        yAxis: { // y轴配置
          type: 'value',
          boundaryGap: false,
          max: 90,
          min: -10,
          axisLine: {
            lineStyle: {
              color: 'rgb(170, 170, 170, .2)',
            }
          },
          axisLabel: {
            inside: false,
            textStyle:  {
              color: 'rgb(255, 255, 255)'
            },
            formatter(val) {
              return val.toFixed(2)+'%'
            }
          },
          axisTick: {
            lineStyle: {
              color: 'rgb(170, 170, 170)'
            }
          },
          splitLine: {
            show: true,
            interval: 10,
            lineStyle: {
              color: 'rgb(170, 170, 170, .2)'
            }
          },
          splitNumber: 10,
        },
        series: [{
			type: 'line', // 折线图配置
			data: []
		}]
      },

热力图配置（heatmap）

      option3: {
        tooltip: { // 工具条
          position: 'top'
        },
        grid: { // 网格
          top: '15%'
        },
        xAxis: { // x轴
          type: 'category',
          data: ['BTC', 'AMPL', 'ETH', 'XRP', 'LTC', 'BCH', 'ZCASH', 'EOS', 'XLM', 'XMR'],
          position: 'top',
          splitArea: {
            show: true
          },
          axisLabel: {
            inside: false,
            textStyle:  {
              color: 'rgb(255, 255, 255)'
            },
          },
        },
        yAxis: { // y轴
          type: 'category',
          data: ['BTC', 'AMPL', 'ETH', 'XRP', 'LTC', 'BCH', 'ZCASH', 'EOS', 'XLM', 'XMR'],
          splitArea: {
            show: true
          },
          axisLabel: {
            inside: false,
            textStyle:  {
              color: 'rgb(255, 255, 255)'
            },
          },
        },
        visualMap: [{ // 视觉（颜色变换）
          min: 0,
          max: 10,
          show: false,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '15%',
          inRange: {
            color: ['rgb(140, 71, 71)', 'rgb(70, 132, 55)'],
            symbolSize: [30, 100]

          }
        }],
        series: [{ // 热力图配置
          name: 'Punch Card',
          type: 'heatmap',
          data: data,
          label: {
            show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 255, 0, 0.5)'
            }
          }
        }]
      }