ECharts的使用 - 起风了

什么是ECharts？

ECharts是百度团队开发的一个可以个性定制的数据可视化的图标库。数据可视化是指将数据以图形的形式进行显示。比如

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .man,            .wom{                width: 300px;                height: 30px;                color: #fff;            }            .man{                background-color: blue;            }            .wom{                width: 400px;                background-color: red;            }        </style>    </head>    <body>        <p>分别将男女的个数用图形显示</p>        <div class="man">200个男性</div>        <div class="wom">250 个女性</div>    </body></html>

作用：将数据可视化，让数据更加直观。

使用

1、引入ECharts

<script src="AMD"></script>  //引用AMD<script src="local"></script> //也可以下载ECharts到本地引入

2、创建一个存放ECharts的图形容器（比如div）

<div class="echarts" style="height: 400px;width: 400px; border: 1px solid blue; padding: 20px;"></div>

3、初始化一个ECharts的实例

jsvar demo = ECharts.init(document.querySelectior('div'))  //将ECharts的图表放到div容器中显示。

4、图表的数据和配置项

var option = {                title: {                    text: 'ECharts 入门示例'                },                tooltip: {},                legend: {                    data:['销量']                },                xAxis: {                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]                },                yAxis: {},                series: [{                    name: '销量',                    type: 'bar',                    data: [5, 20, 36, 10, 10, 20]                }]            };

5、进行显示图表

demo.setOption(option);  //将数据在图表中进行显示

6、完整的demo

<body>        <div class="echarts" style="height: 400px;width: 400px; border: 1px solid blue; padding: 20px;"></div>        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>        <script>            var            div = document.querySelector(".echarts"),            demoEcharts = echarts.init(div);            var option = {                title: {                    text: 'ECharts 入门示例'                },                tooltip: {},                legend: {                    data:['销量']                },                xAxis: {                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]                },                yAxis: {},                series: [{                    name: '销量',                    type: 'bar',                    data: [5, 20, 36, 10, 10, 20]                }]            };            demoEcharts.setOption(option);        </script>    </body>

更详细看官网ECharts

vue使用ECharts

安装
1、通过npm安装命令
$ npm install echarts --save-dev
成功就会显示 + echarts@4.1.0（数字是版本号）

2、全局配置echarts

main.js文件配置import ECharts from "vue-echarts/components/ECharts"  //全局引入echartsimport 'echarts/lib/chart/bar' //引入bar工具import 'echarts/lib/components/toopic' //引入提示工具Vue.component('echart' , ECharts);//全局引用echarts模板

3、如果使用了vue-cli创建项目更改build/webpack.base.conf.js文件部分内容

{        test: /\.js$/,        loader: 'babel-loader',-       include: [resolve('src'), resolve('test')]+       include: [+         resolve('src'),+         resolve('test'),+         resolve('node_modules/vue-echarts'),+         resolve('node_modules/resize-detector')+       ]      }

4、单文件组件配置

<template><chart :options="polar"></chart></template><style>.echarts {  height: 300px;}</style><script>export default {  data: function () {    let data = []    for (let i = 0; i <= 360; i++) {        let t = i / 180 * Math.PI        let r = Math.sin(2 * t) * Math.cos(2 * t)        data.push([r, i])    }    return {      polar: {        title: {          text: '极坐标双数值轴'        },        legend: {          data: ['line']        },        polar: {          center: ['50%', '54%']        },        tooltip: {          trigger: 'axis',          axisPointer: {            type: 'cross'          }        },        angleAxis: {          type: 'value',          startAngle: 0        },        radiusAxis: {          min: 0        },        series: [          {            coordinateSystem: 'polar',            name: 'line',            type: 'line',            showSymbol: false,            data: data          }        ],        animationDuration: 2000      }    }  }}</script>

在vue的项目中配置了上面所说的设置就可以在vue项目中显示echarts了，但是当插入到echarts中的饼图时，你的项目会报错说请预先设置pie，怎样解决这个问题呢？
在原先配置好的main.js中引入echarts

import echarts from 'echarts' //添加import 'echarts/lib/chart/bar'import 'echarts/lib/component/tooltip'

更详情vue-echarts-npm

文章转载于:https://www.jianshu.com/p/259280bf1d53

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《ECharts的使用》