vue中 ECharts 的使用

npm install echarts --save        　　//安装
在需要的项目中导入：

import * as echarts from 'echarts'
**** 不能用 import echarts from 'echarts' ****

 

1、

<!-- 为 ECharts 准备一个具备大小（宽高）的 dom -->
<div id="main" style="width: 600px;height:400px;">
</div>

2、

mounted() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

 

---

 

折线图：

var option = {
        title:{　　　　　　　　　　　　　//标题
            text:"用户活跃趋势：",　　　　　　　　 //标题文本
            show: true,　　　　　　　　　　　　　 //设置展示 默认false
            top: "7%",　　　　　　　　　　　　　　//标题的定位 top left bottom right 百分比，或者绝对值数字 要 ""
            left:"2%"
        },
        xAxis:{　　　　　　　　　　　　　// x轴
            type:'category',　　　　　　　　　　　// 必写类型
            data:['2020.05','2020.06','2020.07','2020.08','2020.09','2020.10'],　　// x轴显示
            boundaryGap: false,
        },
        yAxis:{　　　　　　　　　　　　　//y轴
            type:'value',　　　　　　　　　　　　　// 必写类型
            // offset: -10　　　　　　　　　　　　 //y轴偏移
        },
        grid: {　　　　　　　　　　　　//图表内容
            left: "15%",　　　　　　　　　　　　　　//偏移值
            bottom: "15%",
            height: 140　　　　　　　　　　　　　　//图表高度 宽度  绝对值数字，或者百分比
        },
        series:[{　　　　　　　　　　//
            data:[{　　　　　　　　　　　　　//data里是 x 轴上的值
                value:13356,　　　　　　　 　　　　//value里是值的内容
                label: {　　　　　　　　　　　　　　//label里是值 单个标记 的一些属性
                　　show: true,　　　　　　　　　　　　//在折线上显示value值，默认为false
                　　position: "bottom"　　　　　　　　//显示的位置，上下左右
                }
            },{
                value:9483,
                label: {
                　　show: true,
                　　position: "bottom"
                }
            },{
                value:17238,
                label: {
                　　show: true,
                　　position: "top"
                }
            }],
            type:'line',　　　　　　　　// 类型为折现类型
            label: {　　　　　　　　　　// label 里是 所有标记 的属性
                show: true,　　　　　　　　　　//在折线上显示value值，默认为false
                color: "#6B9AFF"  　　　　　　//所有标记的颜色
            },
            itemStyle: {    　　　　　// 线条的颜色
                color: "#6B9AFF"
            },
            lineStyle: {    　　　　　//线条样式
                width: 3
            },
　　　　　　　smooth: true;　　　　　　//平滑曲线，默认为false，可设置0~1，越靠近0越直，设置为true为0.5
        }]
    }

 

2、柱状图

var option = {
    title:{        //标题
      text:"终端活跃地区TOP10：",　　　　//标题文本
      show: true,　　//展示标题
      top: "7%",　　//标题偏移
      left:"2%"
    },
    xAxis: {
      type: 'category',
      data: ['福建省', '陕西省','四川省','重庆市','湖南省','安徽省','浙江省','甘肃省','青海省','其他']
    },
    yAxis: {
      type: 'value'
    },
    grid: {　　　　//图标内容的设置
      left: "8%",　　
      bottom: "18%",
      height: 140
    },
    legend: {　　//页面的标签设置　　
      show: true,　　//在series里面设置name才能显示
      right: "1%",
      top:"7%",
      icon: "circle",　　//标签显示 圆形
    },
    series: [{　　//内容的设置　　多个内容多个,{}里写
      name:"拥有终端",　　//标签显示的内容
      data: [90, 71, 60,67,82,47,55,64,65,22],
      type: 'bar',
      barWidth:10,　　//柱状图的宽度
      itemStyle: {　　//柱状图的颜色
        color: "rgba(114,104,255,1)"
      },
      label: {　　//图上的标签
        show: true,
        position: "top",
        color:"#353637",
        fontSize: 10
      }
    },{
      name:"拓展商户",
      data: [60,79,67,82,99,82,54,80,47,20],
      type: 'bar',
      barWidth:10,
      itemStyle: {
        color: "rgba(101,231,242,1)"
      },
      label: {
        show: true,
        position: "top",
        color:"#353637",
        fontSize: 10
      }
    }]
  };