Shulou(Shulou.com)06/03 Report--

This article is about how vue uses ECharts to implement line charts and pie charts. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

When developing the background management project, you need to count the background user data, which is displayed in the form of line chart and pie chart. Apache-echarts is used here to achieve the requirements.

1. Install echarts and introduce npm install echarts-- save import * as echarts from 'echarts';2. Use echarts to implement pie diagram import * as echarts from 'echarts'; require (' echarts/theme/macarons'); / / introduce the topic export default {data () {return {chartPie: null}}, mounted () {this.$nextTick (() = > {this.drawPieChart ()) })}, methods: {drawPieChart () {let mytextStyle = {color: "# 333", fontSize: 18,} Let mylabel = {show: true, position: "right", offset: [30,40], formatter:'{b}: {c} ({d}%)', textStyle: mytextStyle}; this.chartPie = echarts.init (document.getElementById ('chartPie'),' macarons') This.chartPie.setOption ({title: {text: 'Pie Chart', subtext:' pure fiction', x: 'center'}, tooltip: {trigger:' item', formatter: "{a} {b}: {c} ({d}%)",} Legend: {data: ['direct access', 'email marketing', 'affiliate advertising', 'video advertising', 'search engine'], left: "center", top: "bottom", orient: "horizontal" }, series: [{name: 'access source', type: 'pie', radius: [' 50%,'70%'], center: ['50%,'50%'] Data: [{value: 335, name: 'direct access'}, {value: 310, name: 'email Marketing'}, {value: 234, name: 'Alliance Advertising'}, {value: 135, name: 'Video Advertising'}, {value: 1548 Name: 'search engine'}], animationEasing: 'cubicInOut', animationDuration: 2600, label: {emphasis: mylabel}}]}) }. Pie-wrap {width:100%; height:400px;}

3. Use echarts to implement line diagram import * as echarts from 'echarts'; require (' echarts/theme/shine'); / / introduce the topic export default {data () {return {chartLine: null}}, mounted () {this.$nextTick (() = > {this.drawLineChart ()) })}, methods: {drawLineChart () {this.chartLine = echarts.init (this.$el,'shine') / / based on the prepared dom Initialize echarts instance let option = {tooltip: {trigger: 'axis'}, legend: {data: [' email Marketing', 'Alliance Advertising', 'Video Advertising', 'Direct access', 'search engine']}, calculable: true XAxis: [{type: 'category', boundaryGap: false, axisTick: {show: false}, data: [Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday' Saturday, Sunday]}, yAxis: [{type: 'value', axisTick: {show: false} Name:' (person)'}], series: [{name:' email Marketing', type:'line', stack: 'Total', data: [120,132,101,134,90,230 10]}, {name:' Alliance Advertising', type:'line', stack: 'Total', data: [220,182,191,234,294,290,310]} {name:' Video Advertising', type:'line', stack: 'Total', data: [150,232,201,154,190,330,410]}, {name:' Direct access' Type:'line', stack: 'total', data: [320,332,301,334,390,330,320]}, {name:' search engine', type:'line' Stack: 'total', data: [820,932,901,934, 1290, 1330, 1320]}]} / / display the chart this.chartLine.setOption (option) using the configuration items and data just specified;}} .line-wrap {width:50%; height:400px;}

Basic concepts of 4.echarts

1) echarts instance

Multiple echarts instances can be created in a web page, multiple charts and coordinate systems can be created in each echarts instance, and so on (described in option). Prepare a DOM node (as a rendering container for echarts), and you can create an echarts instance on it.

2) Series (series)

A set of values and the graphs they map to, a series contains at least a set of values, chart types (series.type), and other parameters about how the data is mapped to the graph.

The series.type in echarts is the chart type. Series type (series.type) at least: line (line chart), bar (bar chart), pie (pie chart)

3) components (component)

There are at least these components in echarts: xAxis (Cartesian X axis), yAxis (Cartesian Y axis), grid (Cartesian base plate), dataZoom (data area scaling component), visualMap (visual mapping component), tooltip (prompt box component), toolbox (toolbar component), series (series),...

Common configuration items for 5.echarts and API

1) title title component, including main title and subtitle

Title: {text: 'Pie Chart',// main title text subtext:' purely fictional', / / subtitle text x: 'center', textStyle: {/ / main title style color: "# 333", fontSize: 18}, subtextStyle: {}, / / subtitle style itemGap: 10Magentional / spacing between main and subtitle}

2) legend Legend component

Legend: {left: "center", / / distance of the legend component from the left side of the container top: "bottom", / / distance of the legend component from the upper side of the container orient: "horizontal", / / the layout of the legend list is oriented toward itemGap: 20 function / the interval between each item of the legend formatter: function (name) {/ / used to format the legend text Supports two forms of string template and callback function ~ return 'Legend' + name }, icon data of icon:'circle',// legend item: [{icon:' triangle', textStyle: {color: 'red'}, name:' direct access'}, 'email marketing', 'alliance advertising', 'video advertising', 'search engine'] / / data array of legend}

3) the x axis in xAxis Cartesian coordinate system grid

XAxis: [{type: 'category',// axis type boundaryGap: false, axisTick: {/ / axis scale related settings show: false}, data: [' Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' 'Sunday'] / / Category data}]

4) y axis in yAxis Cartesian coordinate system grid

YAxis: [{type: 'value',// axis type, `' value' 'numerical axis, suitable for continuous data axisTick: {show: false}, name:' (person)'}]

5) tooltip prompt box component

Tooltip: {trigger: 'axis',// trigger type,' axis' axis trigger. Formatter is mainly used in charts where histograms and line charts can use category axes: "{a} {b}: {c} ({d}%)". / / template variables include `{a}`, `{b}`, `{c}`, `{d}`, `{e}`, indicating series name and data name, respectively. Data values, etc.}

6) list of series series, each series determines its own chart type through type

A.series-line series: [{name:' email Marketing', type:'line', stack: 'Total', data: [120,132,101,134,90,230,210], / / data content array areaStyle: {/ / region fill pattern color:'red'} in series LineStyle: {/ / Line style color:'#000'}, emphasis: {/ / highlight style label: {color:'red'}] B.series-pieseries: [{name: 'access Source', type: 'pie', radius: [' 50%' '70%'], / / the radius of the pie chart. The first item of the array is the inner radius. The second item is the outer radius center: ['50%','50%'], / / the center (center) coordinate of the pie chart. The first item of the array is Abscissa, and the second item is ordinate. Support setting to a percentage. When set to a percentage, the first item is relative to the container width, and the second item is whether the roseType: false,// is displayed as a Nightingale diagram relative to the container height. Distinguish data size by radius data: [/ / data content array in series {value: 335, name: 'direct access'}, {value: 310, name: 'email marketing'}, {value: 234, name: 'alliance advertising'}, {value: 135, name: 'video advertising'}, {value: 1548 Name: 'search engine'}], animationEasing: 'ease effect of cubicInOut',// initial animation animationDuration: 2600 label / duration of initial animation label: {emphasis: mylabel// highlighted sector and tag style}}] Thank you for reading! This is the end of the article on "how vue uses ECharts to achieve line chart and pie chart". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.