elementUI 使用echarts插件

1.npm安装echarts:

npm install echarts -s

2.全局引入(我们安装完成之后,可以在main.js中全局引入echarts)

import echarts from "echarts";

Vue.prototye.$echarts = echarts;

3.html代码:

<template>
    <div id="chartColumn" style="width: 100%; height: 400px;">
    </div>
</template>

4.js代码:

<script>
        import echarts from 'echarts'
        export default {
            data(){
                return {
                    chartColumn: null
                }
            },
            mounted() {
                this.drawLine();
            },
            methods: {
                drawLine(){
                    this.chartColumn = echarts.init(document.getElementById('chartColumn'));

                    this.chartColumn.setOption({
                      title: { text: 'Column Chart' },
                      tooltip: { trigger: "axis", axisPointer: { type: "cross", label: { backgroundColor: "#76baf1" } } },
                      xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                      },
                      yAxis: {
                        type: 'value'
                      },
                      series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                      }]
                });
                }
            }
        }
    </script>

5.类型type:

type: 'bar':柱状/条形图
type: 'line':折线/面积图
type: 'pie':饼图
type: 'scatter':散点(气泡)图
type: 'effectScatter':带有涟漪特效动画的散点(气泡)
type: 'radar':雷达图
type: 'tree':树型图
type: 'treemap':树型图
type: 'sunburst':旭日图
type: 'boxplot':箱形图
type: 'candlestick':K线图
type: 'heatmap':热力图
type: 'map':地图
type: 'parallel':平行坐标系的系列
type: 'lines':线图
type: 'graph':关系图
type: 'sankey':桑基图
type: 'funnel':漏斗图
type: 'gauge':仪表盘
type: 'pictorialBar':象形柱图
type: 'themeRiver':主题河流
type: 'custom':自定义系列

 

上一篇:绘制不同类型的直线 DrawMultiLine


下一篇:net core 中间件详解及项目实战