zoukankan      html  css  js  c++  java
  • Vue2.0+elementUI使用echarts插件

    1、npm安装echarts:
        $ npm install echarts -S
    2、html代码:
    <template>
        <div id="chartColumn" style=" 100%; height: 400px;">
        </div>
    </template>

    3. 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: {},
                          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>

    4、效果图:

  • 相关阅读:
    IOC / AOP
    Volatile
    观察者模式
    Gang Of Four的23中设计模式
    适配器模式
    享元模式
    设计模式
    B树和B+树
    Java内存模型(JMM)
    【Java的IO流之文件字符输入输出流 25】
  • 原文地址:https://www.cnblogs.com/yeqrblog/p/8961402.html
Copyright © 2011-2022 走看看