angular——echarts

安装依赖

cnpm i echarts ngx-echarts -S

配置

angular.json 中全局引入 echarts

"scripts": [
  "node_modules/echarts/dist/echarts.min.js"
],

在所要使用的 module 中引入 ngx-echarts

// ngx-echarts
import {
    NgxEchartsModule } from 'ngx-echarts'

@NgModule({
   
  declarations: [EchartsComponent],
  exports: [EchartsComponent],
  imports: [
    NgxEchartsModule,
    CommonModule,
    IonicModule
  ]
})

使用

<div class="echarts" echarts [options]='options'></div>

this.options = {
   
  title: {
   
    text: '折线图堆叠'
  },
  tooltip: {
   
    trigger: 'axis'
  },
  legend: {
   
    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  },
  grid: {
   
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
   
    feature: {
   
      saveAsImage: {
   }
    }
  },
  xAxis: {
   
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
   
    type: 'value'
  },
  series: [
    {
   
      name: '邮件营销',
      type: 'line',
      stack: '总量',
      data: [120, 132, 101, 134, 90, 230, 210],
      // itemStyle: { normal: { color: '#33cc7b' } } // 设置颜色
    },
    {
   
      name: '联盟广告',
      type: 'line',
      stack: '总量',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
   
      name: '视频广告',
      type: 'line',
      stack: '总量',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
   
      name: '直接访问',
      type: 'line',
      stack: '总量',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
   
      name: '搜索引擎',
      type: 'line',
      stack: '总量',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

地图：china.js 的链接: https://pan.baidu.com/s/17E0bdAuj_fdObg5KTWrcbg 提取码: 5r9q

<script th:src="./js/echarts.min.js"></script>
<script th:src="./js/china.js"></script>

			let myData = [];
            for (let i in res.data) {
   
                myData.push({
   name: i, value: res.data[i]});
            }

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

            let option = {
   
                backgroundColor: '#fff',
                title: {
   
                    text: '地区成果数量',
                    x: 'right'
                },
                tooltip: {
   
                    trigger: 'item'
                },

                //左侧小导航图标
                visualMap: {
   
                    x: 'left',
                    y: 'center',
                    inRange: {
   
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    },
                    text: ['多', '少'],
                    calculable: true,
                },

                //配置属性
                series: [{
   
                    name: '数据',
                    type: 'map',
                    map: 'china',
                    roam: true,
                    zoom: 2.5,
                    center: [110.97, 25.71],
                    label: {
   
                        normal: {
   
                            show: true  //省份名称
                        },
                        emphasis: {
   
                            show: false
                        }
                    },
                    data: myData  //数据
                }]
            };
            myChart.setOption(option);

补充：

Echarts字体和线条颜色设置操作笔记

保存图片

echart的y轴设置最小值有两种方式

1.min可以设置为特殊值‘dataMin’，此时取数据在该轴上的最小值作为最小刻度。

yAxis: {
   
    min: 'dataMin' // 最小值
},

2.scale设置为true后，坐标刻度不会强制包含零刻度。（注意：只在数值轴中（type:‘value’）中有效）

yAxis: {
   
    scale:true
},