ECharts + Vue-echarts简单使用

1.下载库

npm install echarts@next vue-echarts@next --save

2.main.js引入注册

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent,
  DataZoomComponent,
  DatasetComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';


echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer,
  ToolboxComponent,
  DatasetComponent,
  DataZoomComponent
]);

app.component('v-chart', VChart);

3..vue文件中使用

<v-chart :option="chartOptions" style="width: 90%; height: 500px;"></v-chart>

import * as echarts from 'echarts';

const chartOptions = computed(() => ({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
}));