Echarts图表知识点汇总及请求django服务器后端跨域问题解决

1.引入echarts

vue3中通过npm引入：npm install echarts --save

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

大概思想就是：首先要有一个容器（div）承载需要绘制的图表，在 HTML 中定义有宽度和高度的父容器，通过js的document.getElementById('main')获取指定盒子，进行渲染；

2.修改图表颜色（主题Theme）

var myChart = echarts.init(document.getElementById('main'),'dark');

这里的dark就是样式，在指定承载的盒子时，可以设定样式风格；

其他的样式需要在主题编辑器 - Apache ECharts下载后引入使用：

  // 假设主题名称是 "vintage"
fetch('/src/theme/vintage.json')
  .then(r => r.json())
  .then(theme => {
    // 注意这里是 theme.theme
    echarts.registerTheme('vintage', theme.theme);

    var chart = echarts.init(document.getElementById('zzt2'), 'vintage');
    chart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
  })

这里的fetch('/src/theme/vintage.json')，路径是在vue从根目录的src下寻找，将需要用到的主题json文件复制即可； 

3.获取天气图标网页

暴雨.png (147×147) (scggqx.com)  修改天气 获取不同的天气图标：

{ ‘晴’: ‘a00’, ‘多云’: ‘a01’, ‘阴’: ‘a02’, ‘阵雨’: ‘a03’, ‘雷阵雨’: ‘a04’, ‘冰雹’: ‘a05’, ‘雨夹雪’: ‘a06’, ‘小雨’: ‘a07’, ‘中雨’: ‘a08’, ‘大雨’: ‘a09’, ‘暴雨’: ‘a10’, ‘大暴雨’: ‘a11’, ‘特大暴雨’: ‘a12’, ‘阵雪’: ‘a13’, ‘小雪’: ‘a14’, ‘中雪’: ‘a15’, ‘大雪’: ‘a16’, ‘暴雪’: ‘a17’, ‘雾’: ‘a18’, ‘冻雨’: ‘a19’, ‘沙尘暴’: ‘a20’, ‘小到中雨’: ‘a21’, ‘中雨-大雨’: ‘a22’, ‘大雨-暴雨’: ‘a23’, ‘暴雨-大暴雨’: ‘a24’, ‘大暴雨-特大暴雨’: ‘a25’, ‘小雪-中雪’: ‘a26’, ‘中雪-大雪’: ‘a27’, ‘大雪-暴雪’: ‘a28’, ‘浮尘’: ‘a29’, ‘扬沙’: ‘a30’, ‘强沙尘暴’: ‘a31’ }

axios请求django服务器后端跨域问题解决

解决跨域问题可以从两个方面入手：vue配置代理服务器；django安装跨域插件；本文只有第二种方法；

1.安装 django-cors-headers 库：

pip install django-cors-headers

2.在 settings.py 中添加 corsheaders 到 INSTALLED_APPS 和 MIDDLEWARE 设置中：

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware', 

//在'django.middleware.common.CommonMiddleware'之前

    ...
]

3.设置 CORS_ALLOWED_ORIGINS 来指定允许访问的前端源。如果你想允许所有源，可以设置 ：

CORS_ALLOW_ALL_ORIGINS = True

4.设置CORS_ALLOW_METHODS 是用来指定允许的 HTTP 请求方法：

CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

5.设置CORS_ALLOW_HEADERS

CORS_ALLOW_HEADERS = '*'

在vue组件中，跨域通过axios的get请求，直接访问：

async function test() {
  // 方法一
  // axios.get('https://do.ceo/api/breed/pembroke/images/random')
  // .then(response => {   // 访问成功
  //   console.log('成功了', response.data);
  //   let result = response.data;
  // })
  // .catch(error => {   // 访问失败
  //   console.log('失败了', error);
  //   alert(error)
  // });

  //方法二
  try {
    let result = await axios.get('http://127.0.0.1:8000/')
    console.log(result)
  } catch (error) {
    console.log(error)
  }

}

//钩子
onMounted(() => {
  test()
})
</script>