Vue中使用Echarts绘制图表

1.先安装Echarts

1.使用npm 安装或者

npm install echarts -S

2.使用cnpm淘宝镜像安装

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用淘宝镜像安装Echarts

cnpm install echarts -S

---

2.在main.js中引用

不用打包程序中引用，注册全局组件

import * as echarts from 'echarts/lib/echarts'

在打包程序中引用加上（按需引入）

import * as echarts from 'echarts/core'

// BarChart柱状图

import {

  BarChart

} from 'echarts/charts';

import {

  TitleComponent,

  TooltipComponent,

  GridComponent

} from 'echarts/components';

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步

import {

  CanvasRenderer

} from 'echarts/renderers';

// 注册必须的组件

echarts.use(

  [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]

);

在官方文档中查看

---

3.实现Echarts绘图

1.在脚手架中使用（打包程序）

export default {

    data(){

        return{

            //存放数据

        }

    }

},

methods:{

    drawLine() {

        let myChart = this.$echarts.init(document.getElementById('myChart'));

        // 绘制图表

        myChart.setOption({

            title: {

                text: '我的第一个ECharts学习',

                textStyle：{

                        //设置显示文字样式

                }

                //设置标题大小超出x轴不显示

                axisLabel: { interval:0, // rotate:40, formatter:function(value) { return value.split("").join("\n"); }},

},

            backgroundColor: '#cdd2d2',

            tooltip: {},

            xAxis: {

                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

},

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                //data: [5, 20, 36, 10, 10, 20]

                //单独设置每一项中的样式

                data: [{

value: 5,

name:"衬衫",

itemStyle: { color: '#c23531'}

}]

});

},

},

//注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

mounted() {

    this.drawLine()

}

不需要打包程序中使用